Front End/CSS

상단 헤더에 카페 소개, 오시는 길, 이달의 추천 이렇게 세개의 버튼을 만들어놨다. 각각 버튼을 누르면 해당 구역(section)으로 이동할 수 있도록 만들어보도록 하겠습니다. 먼저, section으로 구역을 나눠주고 id를 준다. 나는 카페소개는 id="intro", 오시는길은 id="map", 이달의 추천은 id="choice" 로 값을 지정해줬다. 헤더 안에 #sectionId를 주고, css에서는 html로 전체를 묶어서 scroll-behavior 속성을 smooth로 지정하면 스크롤이 부드럽게 이동한다!!

https://www.w3schools.com/icons/icons_reference.asp Icons from Font Awesome, Bootstrap and Google W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위 사이트를 참고하여 html에 아이콘을 추가해보자 HTML4·5 버전 검색어 : coffee 추가할 페이지의 head 태그 안에 추가한다. 추가하고 ..

border를 기준으로 요소 내부의 양사방 여백 1. padding의 각 방향별 지정 속성 padding-top:n; 위쪽에만 n만큼 지정 padding-right:n; 우측에만 n만큼 지정 padding-bottom:n; 아래만 n만큼 지정 padding-left:n; 좌쪽에만 n만큼 지정 #p01 {border: 1px solid; padding: 10px;} #pdr>li { border: 1px solid;} .pt {padding-top: 30px;} .pr{text-align: right; padding-right: 30px;} .pb {padding-bottom: 30px;} .pl{padding-left: 10%; 2. padding의 값 갯수별 지정법 padding:n n n n; 상 우..

text-align:글자 수평 정렬 text-decoration: 글자의 줄들 text-indent: ; (영문)대소문자 변환 text-overflow: ; 글자 들여쓰기 text-shadow: ; 글자의 그림자 text-transform: ; 영역밖의 글자 처리법 text-로 시작하는 글자 속성들 text-align: ; 글자 수평 정렬 text-decoration : ; 글자의 줄들 text-transform : ; (영문)대소문자 변환 text-indent : ; 글자 들여쓰기 text-shadow : ; 글자의 그림자 text-overflow : ; 영역밖의 글자 처리법 1. text-align : ; 글자 수평 정렬 text-align : left; 글자 수평 정렬 text-align : cen..

font-size:n; 글자 크기 지정 font-weight: ; 글자 두께 지정 font-style: ; 글자 기울기 지정 font-family: ; 글자 폰트 지정 font-size:n; 글자 크기 지정 px : 글자크기 em : 배수(상위요소의 크기에 영향을 받음) rem : 배수 (상위요소의 크기에 영향을 받지않음)(r=root) em은 배수이기 때문에 자신을 둘러싼 상위 속성을 기준으로 그 배수의 크기로 바뀜 (상대적인 크기) rem은 상위요소의 크기에 영향을 받지않음 1.font-size:n; 글자 크기 지정 [px로 크기지정] font-size:16px; 글자 크기 font-size:12px; 글자 크기 font-size:20px; 글자 크기 [em으로 크기지정] em : 배수 단위 (상위요..

pre 태그를 사용하지 않고 공백 살리기 html 파일과 css 파일 연결 [basic.html] title 밑에 선택자 { 속성:속성값; } [basic.css] .pre {white-space: pre; } // pre 태그 사용하지 않고 공백 살리기 .fs15 {font-size: 1.5em;} // 글자 크기 1.5배 .bld {font-weight: bold;} // 볼드체 span 태그 span 태그는 줄이 바뀌지 않고 문자 일부를 선택할 수 있음 선택자 { 속성:속성값; } .red {color: #f00;} 특정 글자를 선택할 시 문구가 나오게하기 선택자 { 속성:속성값; } span 태그는 줄이 바뀌지 않고 문자 일부를 선택할 수 있음 #hid { background-color : #8f..

header 머리말 상단영역 주로 로고나 로그인, 검색 등이 위치 article 독립적, 완성형의 컨텐트 영역.(블로그나 기사 등) section 주제 등으로 나눠지는 컨텐트 영역. (절, 장) aside 페이지의 주된 내용과 별개의 컨텐트 영역. 주로 배너나 퀵링크 등이 위치 footer 하단영역. 주로 카피라이트나 개인정보방침, 주소나 연락처 등이 위치 layout-tag.html 단축키 ctrl+spqce = 자동완성 ctrl+f11 = 미리보기 ctrl+f5 = 새로고침 layout tag header - 머리말. 상단영역. 주로 로고나 로그인, 검색 등이 위치 article - 독립적, 완성형의 컨텐트 영역.(블로그나 기사 등) section - 주제 등으로 나눠지는 컨텐트 영역. (절, 장) ..

css 파일 만들기 general > web browser 2. web > css files > 3. Create a Dynamic Web project webapp : 최상위 폴더 서버 ctrl f11