CSS 기초-(1) 작성, 선택

CSS 작성법

■ html 파일에서 css를 작성할 시

<style>
</style>

사이에 작성

■ CSS 작성 기본

<style>
			*{
            margin: 0; padding: 0; box-sizing: border-box;
        	}
        body{
            font-family: "맑은 고딕",sans-serif;
            color: #333;
            font-size: 14px;
            line-height: 1.6;
            }
</style>

*{}: 모든 선택자에게 적용시킴
body{}: < body>와 < /body> 안에 포함된 건에 대하여 적용시킴

---

CSS

■ css 구문
선택자 {속성:속성값; 속성:속성값;}

■ text 속성
color:글자 색상 /색상명 black.../16진수법 #000000.../컬러함수 rgb(r,g,b)/ 투명도 포함된 컬러함수rgba()
font-size: 글자크기 (본문14px)
line-height 줄 높이
font-weight 글자두껍게
letter-spacing 자간
text-decoration 글자꾸미기
text-indent 들여쓰기

■ box model
width너비
height 높이
padding 안쪽 여백
margin 바깥쪽 여백
border 테두리

---

Display

■ display: block

<p> <div> <h1>... <ol> <ul> <li> <dl> <dt> <dd>...

• 한 행을 다 차지함
• 너비, 높이를 지정할 수 있음
• width를 지정하고 margin: 0 auto;를 주면 중앙정렬이 됨

■ display: inline
<a> <img> <span> <mark> <sup> <sub> <ins> <del>

• 컨텐츠 크기가 너비가 됨
• 너비와 높이를 지정할 수 없음
• 좌우 padding은 지정 가능하나, 상하의 padding은 지정 불가능
• 공간이 있으면 가로로 쌓임
• 글자로 취급되어, 부모요소의 text-align으로 정렬이 됨

■ display: inline-block
<input> <select> button

• 너비와 높이를 지정할 수 없음
• 상하좌우의 padding 지정 가능
• 공간이 있으면 가로로 쌓임
• 글자로 취급되어, 부모요소의 text-align으로 정렬이 됨

■ display: flex
https://velog.io/@sumin0gig/CSS%EA%B8%B0%EC%B4%88-4-position

---

선택자

■ 태그 선택자 <h1>, <div>...등// css입력시 h1로 작성
■ 아이디 선택자 <div id="aa">의 aa// css입력시 #aa로 입력
■ 클래스 선택자 <div class="bb">의 bb// css입력시 .bb로 입력
■ 모든 선택자 css입력시 *로 입력

복합 선택자

■ 하위 선택자

<div>
<li></li>
</div>

css 입력시 #div li

■ 자식 선택자 >

<div>
	<li id="on">
		<li id="no"></li>
	</li>
</div>

css 입력시 #div > li
이 경우, div 바로 아래의 < li id="on">에게 적용된다.
< li id="no">에게는 적용되지 않는다.

형제 선택자

<div>
	<h2></h2>
    <p></p>
    <p></p>
    <p></p>
</div>

■ 인접 형제 선택자 +
css 입력시 h2 + p
이 경우, h2(미포함) 바로 옆의 <p> </p> 1개에게 적용된다.

■ 일반 형제 선택자 ~
css 입력시 h2 ~ p
이 경우, h2와(포함) 같은 줄의 <p> </p> 3개에게 적용된다.

속성 선택자

div이하에 id를 가진 모든 구문에 css를 적용시키고 싶을때
css 입력시 div[id]
■ <. h2 title="a"> 속성 선택자 활용법

글자가 완전히 일치할 경우 [title="a"]

앞글자가 a로 시작하는 경우 [title^="a"]

뒷글자가 a로 끝나는 경우 [title$="a"]

a라는 글자가 포함된 경우 [title*="a"]

css 입력시 h2[title="a"] 와 같은 식!

가상 클래스 선택자

■ 동적 선택자

css 입력시 a:link { color: red; } → 선택자가 방문하지 않은 링크일 때, 글자색을 red로 변환

css 입력시 a:visited { color: red; } → 선택자가 방문한 링크일 때, 글자색을 red로 변환

css 입력시 a:hover { color: red; } → a 태그에 마우스를 올리면, 글자색을 red로 변환

css 입력시 a:active { color: red; } → a 태그를 선택한 상태일때, 글자색을 red로 변환

css 입력시 a:focus { color: red; } → a 태그에 포커스가 들어갔을 때, 글자색을 red로 변환

■ 구조 가상 클래스 선택자

first-child → 선택자에 해당하는 모든 요소 중 첫번째 자식요소를 선택

last-child → 선택자에 해당하는 모든 요소 중 마지막 자식요소를 선택

nth-child(n) → 선택자에 해당하는 모든 요소 중 n번째 자식요소를 선택

nth-of-type(n) → 선택자에 해당하는 type이 같은 요소 중 n번째 자식요소를 선택

nth-child(odd) → 선택자에 해당하는 모든 요소 중 홀수번째 자식요소를 선택

nth-child(even) → 선택자에 해당하는 모든 요소 중 짝수번째 자식요소를 선택

css입력시 div:nth-child(1) 와 같은 식!

■ 부정 선택자

not(선택자)

css입력시 div:not(apple) 와 같은 식!

가상 요소 선택자

::after → 콘텐츠의 뒤에 위치하는 공간을 선택
     content 속성과 함께 사용

::befor → 콘텐츠의 앞에 위치하는 공간을 선택
     content 속성과 함께 사용

css입력시 p::after{ content:"▶"; } 와 같은 식!
< p> < /p> 안에 작성되므로, p의 css를 그대로 받는다.

::first-letter → 콘텐츠의 첫 글자를 선택
     *블록 요소만 적용

::first-line → 콘텐츠의 첫 줄을 선택
     *블록 요소만 적용

css입력시 p::first-letter{ font-size:24px; } 와 같은 식!