*{}
: head를 포함한 문서 내의 모든 요소를 선택
태그명{}
: 지정된 태그를 가지는 요소를 선택
#아이디{}
: 아이디를 지정하여 일치하는 요소를 선택
.클래스명{}
: 클래스명과 일치하는 요소를 선택, 하나 이상 지정 가능
조상 자손{}
: 조상 하위에 있는 자손을 선택, 조상과 자손은 띄어쓰기로 구분
서로의 관계에 따라 자손 선택자, 자식 선택자, 형제 선택자, 일반 형제 선택자 등
: 화면 해상도에 따라 HTML과 CSS를 자동으로 맞춰서 보여주는 기능
: 사이트에 접속하는 미디어 타입과 특징에 따라 다른 CSS 스타일을 적용하도록 도와주는 규격
@media 미디어타입 (적용 조건) { 규칙 }
@import url("");
@import'';
*@import 는 파일 최상단에 위치해야 함
: 사용자 인터페이스 디자인에 최적화된 레이아웃을 정의하는 CSS
자식 요소를 원하는 방향으로 유연하게 배치 가능
justify content : 웹 페이지의 주축을 따라 요소 사이에 공간을 만드는 방법
align-items : 웹 페이지의 교차축을 따라 요소 사이에 공간을 만드는 방법
<style> body{ /*부모 태그*/ flex-direction: column; /*속성 : 값*/ } </style>
flex-direction 속성
<style> 적용할 태그 { position: 값; } </style>
위칫값
: 어떤 상태나 조건이 발생할 때, 사용자의 액션에 따라 스타일이 바뀌는 선택자
<style> button:active { color: purple; } </style> <button>click!</button>
실행>
click!
<style> a:visited { color: purple; } </style> <body> <a href="http://velog.io">velog</a> </body>
실행>
velog<style> input:disabled { background-color: purple; } </style> <body> <input type="text" placeholder="Name" disabled> </body>
<style> body { display:flex } div { width: 200px; height: 200px; display:flex; justify-content: center; align-items: center; background-color: pink; } #second:hover { background-color: olive; } </style> <body> <div></div> <div id="second">마우스를 올려보세요</div> </body>
실행>
<style> .red-input:focus { background: pink; color: red; } .blue-input:focus { background: pink; color: blue; } </style> <body> <input class="red-input" value="클릭하면 빨갛게 됩니다." /> <input class="blue-input" value="클릭하면 파랗게 됩니다." /> </body>
실행>
: id, class 등의 선택자 이용 없이도 요소 선택 가능케 함
<style> span:first-child { color: pink; } span:last-child { color: purple; } </style> <body> <div> <span>:first-child</span> <span>:second-child</span> <span>:last-child</span> </div> <div> <span>:first-child</span> <span>:second-child</span> <h4>:not a span tag</h4> </div> </body>
<style> p:nth-of-type(2n + 1) { color: olive; } p:nth-of-type(2n) { color: purple; } p:nth-of-type(1) { font-style: oblique; } </style> <body> <div> <div>no count</div> <p>first p tag</p> <p>second p tag</p> <div>no count</div> <p>third p tag</p> </div> </body>
실행>
<style> div :only-of-type{ font-style: italic; } </style> <body> <div> <div>first div tag</div> <p>first p tag</p> <p>second p tag</p> <h4>only one h4 tag</h4> <div>second div tag <h4>div's child h4 tag</h4> </div> <p>third p tag</p> </div> </body>
실행>
*Must Have 비전공자를 위한 첫 코딩 챌린지 with HTML&CSS 책을 기본서로 참고, 생활코딩강의에서 배운 내용 및 이미 알고 있는 내용은 제외