--- title: "CSS 정리 03" date: "2019-01-31" tags: ["CSS"] status: archived verified: false --- --- ## CSS 페이지 디자인 * 디자인 추세 : frame태그 -> table태그 -> **div태그** * **div로 디자인을 한다.** * 가운데 정렬, 높이와 넓이를 설정해준다. * **각 div는 유일한 id selector를 설정**해준다. * **header**에는 logo, menu등이 들어간다. * menu는 navigation bar에 속한다. * **container**에는 제공할 서비스가 들어간다. * **footer**에는 회사에 대한 정보가 들어간다. ![01](/md/legacy-assets/Web/CSS/03/01.webp) ```html Insert title here
container : 800(w) x 600(h)
``` ![02](/md/legacy-assets/Web/CSS/03/02.webp) * **처음엔 wrap에 색을 넣어 전체 영역을 잡는다.** * header, container, footer의 영역을 조절하여 wrap이 모두 가려지도록 공간을 분할한다. * 영역을 모두 나눈 후 모든 배경색을 제거한다. ![03](/md/legacy-assets/Web/CSS/03/03.webp) ```html Insert title here
``` ![04](/md/legacy-assets/Web/CSS/03/04.webp) ## CSS 속성 - 그림자 * **문자열 그림자** * 좌표는 음수도 줄 수 있다. ``` text-shadow:x좌표 y좌표 번짐값 그림자색; ``` * **객체 그림자** ``` box-shadow:x좌표 y좌표 번짐값 그림자색; ``` ```html Insert title here 오영근
박스쉐도우
``` ![05](/md/legacy-assets/Web/CSS/03/05.webp) ## CSS 속성 - radius ![06](/md/legacy-assets/Web/CSS/03/06.webp) * **모서리를 둥글게 만들 때 사용** ``` border-radius:수치px ``` * **모서리 별로 둥근정도를 다르게 설정가능** ``` border-radius:좌상px 우상px 우하px 좌하px; ``` ```css .radius { border:1px solid #333; width:300px; height:100px; margin-top:20px; border-radius:10px; } ``` ```html
이번주는 SKY캐슬 막방입니다.
김주영선생님은 과연 교도소에서 재소자들을 SKY를 보낼 수 있을 것인가..
``` ![07](/md/legacy-assets/Web/CSS/03/07.webp) ```css .radius { border:1px solid #333; width:300px; height:100px; margin-top:20px; border-radius:0px 10px 0px 10px } ``` ![08](/md/legacy-assets/Web/CSS/03/08.webp) * 원을 만들 수도 있다. ```css .radius1 { border:1px solid #333; width:200px; height:200px; margin-top:20px; border-radius:100px 100px 100px 100px } ``` ![09](/md/legacy-assets/Web/CSS/03/09.webp) ## CSS 속성 - overflow * **div 크기보다 내용이 더 많을 때** * 스크롤바를 생성할 수 있다. * 약관같은 컨텐츠 생성할 때 사용하면 좋다. ```css overflow:auto; ``` ![11](/md/legacy-assets/Web/CSS/03/11.webp) ![12](/md/legacy-assets/Web/CSS/03/12.webp) ## HTML5 Semantic Tag * **디자인을 구분하기 위한 의미적인 태그** * **header 태그** * 디자인의 **header 부분**을 알려주는 용도 * **nav 태그** * **제공되는 서비스**를 이용하기 위해 만들어 놓은 부분(menubar) * **footer 태그** * 디자인의 **footer 부분** * **section 태그** * **구분되는 하나의 영역** * **aside 태그** * 주 서비스 외에 **부가적인 서비스 영역** * **article 태그** * **게시물을 보여주는 영역** ![10](/md/legacy-assets/Web/CSS/03/10.webp) ## 부모 자식 선택자 ``` 선택자1 선택자2 { 속성1:속성값; 속성2:속성값; .. . } ``` * **태그 이름 사이에 공백을 넣어 부모 태그 하위에 있는 태그에 스타일을 적용시키는 것** * **아이디와 클래스**도 사용가능 ```html
안녕하세요. 이것은 sometag태그입니다.
반갑습니다. 이것은 anothertag입니다.
``` ![13](/md/legacy-assets/Web/CSS/03/13.webp) * **아래처럼 '>'를 사용한 선택자도 있음** * 공백과 비슷하지만 두 태그 사이에 다른 태그가 없는 **순수 부모-자식 태그**간 관계만 적용됨 ```css ul > li { list-style: none } ```