본문 바로가기

학원/CSS

 (13)
19장. 반응형 레이아웃 [ 목차 ] 1. 레이아웃의 문제점 2. viewpoint meta tag 3. @media 4. 해상도 구분에 따른 색 변화 예제 5. Responsive Navigation Bar - Smartphone 1. 레이아웃의 문제점 1) 18장의 레이아웃은 화면폭을 좁힐 때 화면이 망가지는 단점이 존재 2) 이는 HTML 요소에 고정폭을 지정하여 가로 스크롤을 발생시키지 않으면 해결이 어려움 3) 모바일과 같이 작은 해상도의 디바이스에서 접근시 하면이 너무 작아서 가시성에 문제가 발생 2. viewpoint meta tag 1) viewpoint(웹페이지의 가시영역)를 이용하여 디바이스의 특성, 화면크기 등을 고려하여 최적화된 웹페이지 제공가능 2) meta tag는 브라우저 혹은 검색엔진최적화를 위해 검..
18장. 레이아웃 [ 목차 ] 1. Header & Navigation Bar 2. Section % Aside 3. footer 4. 최종 1. Header & Navigation Bar 1) 웹사이트의 필수 구성 요소로, 기본적으로 링크들의 리스트이기 때문에 ul, li, tag를 이용하여 작성 2) header 요소에 화면폭 만큼의 width, 고정 height를 지정 3) background-color와 box-shadow 효과를 추가 4) float 프로퍼티를 이용하여 Navigation bar를 우측정렬 5) a tag height를 logo image height와 같게 정하고 상하 margin 12px를 부여하여 logo image를 수직으로 중앙 정렬 6) inline 요소인 a tag의 margin을 정..
11-17. 간단 요약 [ 목차 ] 11장. 벤더 프리픽스 12장. 그림자 13장. 그레이디언트 14장. 트랜지션 15. 애니메이션 16. 트랜스 폼 17. 웹디자인 타이포그래피 11장. 벤더 프리픽스 1) css 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위한 것 https://poiemaweb.com/css3-vendor-prefix 12장. 그림자 1) 텍스트나 요소에 그림자 효과를 부여하기 위한 프로퍼티 선언 2) text-shadow : 텍스트에 그림자 효과를 부여 3) box-shadow : 요소에 그림자 효과를 부여 https://poiemaweb.com/css3-shadow 13장. 그레이디언트 1) 2가지 이상의 색상을 ..
10장. 스타일의 상속과 적용 우선 순위 [ 목차 ] 1. 상속 2. 캐스캐이딩 3. 중요도 4. 명시도 5. 선언순서 1. 상속 1) 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려받는 것 2) 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 함 3) 모든 프로퍼티가 상속되는 것은 아님 4) 상속 받지 않는 button의 경우 빨간색을 물려받지 않음 5) border, padding은 상속받지 않는 요소로 하위 요소에 적용되지 않음 6) 상속되지 않는 경우, inherit 키워드를 사용하면 명시적으로 상속받게 할 수 있음 2. 캐스캐이딩 1) 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있음 2) CSS 끼리의 충동을 피하기 위한 적용 우선순위가 필요한데 이를 캐스캐이딩이라 지칭..
9장. 요소 정렬 [ 목차 ] 1. float 프로퍼티 2. 정렬 3. width 4. float 프로퍼티가 선언된 요소와 선언되지 않은 요소간 margin이 사라지는 문제 5. float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상반영 되지 않는 문제 1. float 프로퍼티 1) 주로 레이아웃을 구성할 대 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법 2) flexbox 레이아웃을 사용한다면 더 간단히 정렬 가능하지만 이를 지원하지 않는 IE를 고려한다면 float 프로퍼티 사용 3) float 프로퍼티는 본래 이미지 주위를 텍스트로 감싸기 위해 만들어진 것 4) 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것 5) 요소의 위치를 고정시키는 pos..
8장. 요소의 위치 정의 [ 목차 ] 1. position 프로퍼티 2. static 기본위치 3. relative 상대위치 4. absolute 절대위치 5. fixed 고정위치 6. z-index 프로퍼티 7. overflow 프로퍼티 1. position 프로퍼티 1) 요소의 위치를 정의 2) top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정 2. static 기본위치 1) position 프로퍼티의 기본값으로 값을 지정하지 않았을 때와 같음 2) 기본적인 요소 배치 순서에 따라 위, 아래, 왼쪽, 오른족 순서로 배치 3) 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치 4) 이미 설정된 position을 무력화하기 위해 사용될 수 있음 5) 좌표 프로퍼티(top..
7장. 폰트와 텍스트 [ 목차 ] 1. font-size 프로퍼티 2. font-family 프로퍼티 3. font-style / font-weight 프로퍼티 4. line-heigter 프로퍼티 5. letter-spacing 프로퍼티 6. text-align 프로퍼티 7. text-decoration 프로퍼티 8. white-space 프로퍼티 9. text-overflow 프로퍼티 10. world-wrap 프로퍼티 11. word-break 프로퍼티 1. font-size 프로퍼티 1) 텍스트의 크기를 정의' 2. font-family 프로퍼티 1) 폰트를 지정하는 것으로, 해당 폰트가 저장되어 있지 않으면 적용 불가 2) 여러 개를 동시에 지정 가능 3) 첫번째로 지정한 폰트가 없을 경우 다음 지정된 폰트를 적용하..
6장. 백그라운드 [ 목차 ] 1. background-image 프로퍼티 2. background-repeat 프로퍼티 3. background-size 프로퍼티 4. background-position 프로퍼티 5. background-color 5. background-color 1. background-image 프로퍼티 1) 요소에 배경 이미지를 지정 2. background-repeat 프로퍼티 1) 배경 이미지의 반복을 지정 2) 수직, 수평 또는 수직과 수평 모두의 반복을 지정 가능 3) 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우며, 이는 background-repeat 프로퍼티의 기본 값이 repeat이기 때문 4) x축으로만 배경이미지를 반복할 경우 backgro..
5장. display, visibility, opacity 프로퍼티 [ 목차 ] 1. display 프로퍼티 2. block 레벨 요소 3. inline 레벨 요소 4. inline-block 레벨 요소 5. visibility 프로퍼티 6. opcity 프로퍼티 1. display 프로퍼티 1) layout 정의에 자주 사용되는 중요한 프로퍼티로 상속되지 않음 2) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 block 또는 inline 특성을 보유 3) block : block 특성을 가지는 소요 4) inline : inline 특성을 가지는 요소 5) inline-block : inline-block 특성을 가지는 요소 6) none : 해당 요소를 화면에 표시하지 않음 2. block 레벨 요소 1) 항상 새로운 라인에서 시작 2) 화면 크기..
4장. 박스 모델 [ 목차 ] 1. 박스 2. width/height 프로퍼티 3. margin/padding 프로퍼티 4. border 프로퍼티 5. box-sizing 프로퍼티 1. 박스 1) 콘텐츠, 패딩, 테두리, 마진으로 구성 2) 브라우저는 박스 모델의 크기와 프로퍼티, 위치를 근거로하여 랜더링을 실행 3) 웹디자인은 콘텐츠를 담을 박스 모델을 정의하고 css프로퍼티를 통해 스타일과 위치, 정렬을 지정하는 것 4) content : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역으로 width, height 프로퍼티를 보유 5) padding : 테두리 안쪽에 위치하는 요소의 내부 여백영역으로, pdding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명. 요소에 적용된 배경의 컬러, 이미지는 ..
3장. CSS 프로퍼티 값의 단위 [ 목차 ] 1. 키워드 2. 크기 단위 3. px 4. % 5. em 1. 키워드 1) 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재 2) ex. display의 경우 block, inline, inline-block, none 2. 크기 단위 1) CSS에서 사용하는 대표적 크기 단위는 px, em, % 2) cm, mm, inch도 존재 3) 대부분 브라우저 포트 사이즈의 기본값은 16px, 1em, 100% 3. px 1) 픽셀단위로, 1px는 화소1개 크기를 의미 2) 디바이스 해상도에 따라 상대적인 크기를 가지며, 제각각이기에 픽셀 기준 단위는 정확하지 않음 3) 대부분의 브라우저는 1px를 1/96 인치의 절대단위로 인식 4) 요소의 크기나 이미지의 크기 지정에 주로 사용 4. % 1) ..
2장. CSS 셀렉터 [ 목차 ] 1. 복수의 셀렉터 지정 2. 전체 셀렉터 3. 태그 셀렉터 4. ID 셀렉터 5. 클래스 셀렉터 6. 어트리뷰트 셀렉터 7. 복합 셀렉터 8. 가상 클래스 셀렉터 9. UI 요소 상태 셀렉터 10. 구조 가상 클래스 셀렉터 11. 구조 가상 콜렉트 셀렉터 - 특정 위치 12. 부정 셀렉터 13. 정합성 체크 셀렉터 14. 가상 요소 셀렉터 1. 복수의 셀렉터 지정 1) 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표로 구분 2. 전체 셀렉터 1) * : HTML 문서 내의 모든 요소를 선택 3. 태그 셀렉터 1) 지정된 태그명을 가지는 요소를 선택 4. ID 셀렉터 1) #id 어트리뷰트 값 : id 어트리뷰트 값(중복될 수 없는 유일한 값)을 지정하여 일치하는 요소를 선택하는 것 5. ..
1장. CSS 기본문법 [ 목차 ] 1. CSS 2. Selector 선택자 3. Property 속성 4. Value 값 5. HTML과 CSS의 연동 6. Reset CSS 1. CSS 1) HTML이나 XML과 같은 구조화된 문서를 화면, 종이에 어떻게 렌더링 할 것인지 정의하기 위한 언어 2) HTML은 정보의 구조화, CSS는 스타일링의 정의라는 별개의 문법을 갖는 별개의 언어 3) HTML없이 단독으로 존재하는 CSS는 의미가 없음 2. Selector 선택자 1) 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공되는 수단 2) 아래 구문을 Rule Set이라 하며, 셀렉터에 의해 선택된 HTML요소를 어떻게 렌더링할 것인지 브라우저에 지시 3. Property 속성 1) 셀렉터로 HTML 요소..

티스토리툴바