[Front-end] #1.5-2 CSS

또상·2021년 10월 31일

CSS front html 기본문법

front-end

목록 보기

5/58

1. CSS

1-1. CSS 기본 1

1. tag 선택자

특정 태그를 선택하여 속성을 변경하기 위해서 선택자 사용.
만약 같은 태그에 여러개 적용하면 맨 마지막에 넣은 것이 적용됨.

style

<head>
     <style> /* html 안에 같이 코딩 */
    	div { /* div로 감싸진 모든 것에 적용됨. */
        	background: yellow;
        }
        
        p, h1, h2 {
        	/* 여러개 선택도 가능. */
            font-size: 1em; /* em : 원래 크기. 2em : 2배 */
        }
    </style>
</head>

2. * 선택자

* {
 	/* 전체 선택. 초기값 설정할 때 많이 사용. */
}

1-2. CSS 기본 2

1. id(#), class(.)

tag에 id, class 를 설정할 수 있다.

<div id="wrap">
	<div id="content"> <!-- id는 css에서 #content -->
    	<h1 class="heading1">CONTENT</h1> <!-- class는 css에서 .heading1 -->
    </div>
</div>

clear : both (float : left 이런걸 위에서 쓰면 아래까지 적용될 수도 있어서 준다.)

2. 속성 선택자 ([])

input[type=text] {
	/* text type 에만 속성을 줄 수 있다. */
}
img[src] {
	/* 이미지가 나올 때만 이 속성이 생김. */
}

3. 자손 / 후손 선택자

div li {
	/* 후손 : div 안에 있는 모든 li 선택 */
}
div > h1 {
	/* 자손 : div 바로 밑에 있는 h1만 선택 */
}

4. 동위 선택자 (+, ~)

h3~div {
	/* h3와 동등한 위치에 있는 모든 div 선택 */
}
h3+div {
	/* h3와 동등한 위치에 있는 바로 밑에 있는 딱 하나만 선택 */
}

1-3. CSS 기본 3

1. 반응 선택자

마우스를 올렸을 때 색상이 변하는 반응을 보여준다던가 하는 상황에 사용.

li:hover { /* over : 마우스가 올라갔을 때 */
	color: blue;    
}
p::selection {
	/* 긁었을 때 (선택) */
}

margin: 10px 10px 20px 15px /* 상 하 좌 우 */
margin: 0 auto /* 상 0 좌 우 같아짐. (중앙정렬) */

2. 상태 선택자

선택을 했을 때 바뀌는 것!

input:focus {
	/* focus 되면 커진다던가 하는 효과를 줄 수 있음 */
}
input:enabled {
}
input:disabled {
	/* disable면 color 회색으로 바꾼다던지... */
}

3. 구조 선택자

짝수에 있는 것은 빨강, 홀수에 있는 것은 노랑 이런식으로 구조를 준다.

nth-child, first-child, last-child ...

ul li a {
	/* ul 안의 li 안의 모든 a 에 적용. */
}
ul li:first-child {
	/* ul 안의 li 중 첫번째 item에 적용. */ 
    border-radius: 10px 10px 0 0; /* 좌 상단 우 상단을 10px씩 둥글게 */
}
ul li:nth-child(2n+1) {
	/* ul 안의 li 중 홀수번째 item에 적용. */ 
}

4. layout

다른 페이지를 볼 때는 가로로 큰 덩어리를 쪼개고, 작은 덩어리, 세로 덩어리를 쪼개가면서 분석하자.

1-4. CSS 기본 4

몰라도 다른 방법으로 구현할 수 있지만 알면 편한 것들!

1. 문자 선택자

특정 문자 or 문자열을 선택하여 CSS 속성 설정

#history::first-letter {
	/* 첫 번째 글자 */
}
#history::first-line {
	/* 첫 번째 줄 */
}

2. 링크 선택자

#content a::after {
	content: ' - ' attr(href);
    /* content id를 가지는 a 태그 뒤에 해당 링크를 - 주소 형태로 붙여라. */
}

3. 부정 선택자

나를 제외한 모든 태그에 속성 붙이기.

#content li:not(.fa) {
	/* content 라는 id를 가진 li 중 class가 fa가 아닌 것에 적용. */
}

출처

인프런 강좌

또상

0년차 iOS 개발자입니다.

이전 포스트

[Front-end] #1.5 HTML

다음 포스트