[포스코x코딩온] 웹 풀스택 과정 1주차 회고 | CSS
1. CSS 참조방식
CSS의 웹페이지 디자인 기능을 구현시키기 위해서는, HTML이 CSS를 참조할 수 있도록 해야한다.
아래의 3가지 방법으로 참조할 수 있다.
(1) 인라인 방식
: 원하는 태그에 직접 스타일을 작성한다.
- 장점: 직관적..
- 단점: 재사용이 불가능하기 때문에, 같은 스타일도 코드를 복붙해서 사용해야 함.
(2) 내장 방식
: HTML의 <head> 태그 내부에 사용할 style을 미리 선언한다. (<style>태그로 선언)
- 장점: 지정한 태그에 같은 스타일을 적용할 수 있음.
- 단점: 다른 HTML 파일에 재사용 불가능.
(3) 링크 방식
: 하나의 CSS 파일을 작성한 뒤, HTML 파일에서 해당 파일을 링크하여 사용한다. (<head>태그 내 <link>으로 연결)
- 장점: 재사용 가능. 효율적으로 스타일 변경 가능함.
* 참조 방식의 우선순위
인라인 > 내장 or 링크 (늦게 쓰여진 것이 우선)
: 코드는 기본적으로 위에서 아래로 읽기 때문에, 가장 늦게 읽히는 것이 우선으로 적용됨.
2. CSS 선택자
CSS는 기본적으로 "선택자(selector)", "속성(property)", "속성값(property value)" 으로 이루어진다. ("선택자"로 불러온 태그의 "속성"을 "속성값"으로 변경하겠다는 의미)
- 선택자: 스타일(속성값을 변경)을 적용하고자 하는 HTML 요소를 선택하는 수단.
- 속성: {} 내에 속성 값을 지정하여 다양한 스타일을 정의할 수 있다. (여러 개의 속성을 연속으로 지정할 수 있으며, 세미콜론(;)으로 구분)
- 속성 값: 해당 속성에 사용할 수 있는 값을 의미한다.
🚩기본 선택자
추가 조건 없이, 간단히 무엇인가를 호출할 때 사용한다.
전체 선택자 *: 해당 html에 존재하는 모든 요소를 선택한다.
태그 선택자 ABC: 태그 이름이 ABC인 요소를 선택한다.
Class 선택자 .ABC: HTML class 속성값이 ABC인 요소를 선택한다. (.으로 부름)
ID 선택자 #ABC: HTML id 속성값이 ABC인 요소를 선택한다. (#으로 부름)
- 여러 요소에 중복으로 사용할 수 있는 class와 달리, id는 하나의 태그에만 사용 가능하다.
- id 선택자는 class 선택자보다 강하다. (class 스타일이 더 아래에서 지정되어도, id 스타일이 적용됨)
🚩복합 선택자
특정 조건을 만족하는 요소를 호출할 때 (기본 선택자보다 specific하게 선택할 수 있음)
일치 선택자 ABCXYZ: 선택자 ABC와 XYZ를 동시에 만족하는 요소를 선택한다.
(아래의 경우, span태그 이면서 orange를 class로 갖는 요소를 선택함)
자식 선택자 ABC > XYZ: 선택자 ABC의 자식요소 XYZ를 선택한다.
(아래의 경우, ul의 자식 요소 중 orange를 class로 갖는 요소를 선택함. 하위요소 아님)
후손 선택자 ABC XYZ: 선택자 ABC의 하위요소 XYZ를 선택한다.
(아래의 경우, ul의 하위 요소 중 orange를 class로 갖는 요소를 선택함)
인접 형제 선택자 ABC + XYZ: 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택한다.
(아래의 경우, orange를 class로 갖는 요소의 바로 다음의 형제요소가 li이면, 해당 요소를 선택함)
일반 형제 선택자 ABC ~ XYZ: 선택자 ABC의 다음 형제 요소 XYZ를 모두 선택한다.
(아래의 경우, orange를 class로 갖는 요소의 형제요소 중 li 요소를 모두 선택함. 바로 인접하지 않아도 됨)
🚩가상 클래스 선택자
- 사용자의 행동으로 인해 변화하는 가상 상황에 따라 요소를 선택할 때 (Hover, Active, Focus)
- 요소의 상황에 따라 선택할 때 (first-child, last-child, nth-child)
- 특정 요소를 부정하여 선택할 때 (not)
Hover 선택자 ABC:hover: 선택자 ABC요소에 마우스 커서가 올라가 있는 동안 선택한다.
Active 선택자 ABC:active: 선택자 ABC요소에 마우스를 클릭하고 있는 동안 선택한다.
Focus 선택자 ABC:focus: 선택자 ABC요소가 포커스되면 선택한다.
First Child 선택자 ABC:first-child: 선택자 ABC가 형제요소 중 첫째라면 선택한다.
(아래의 경우, fruit 클래스를 가진 요소 중 span 태그가 첫번째 요소인 것을 선택함. fruit 클래스이지만, 첫번째 요소가 span이 아니라면 선택하지 않음)
Last Child 선택자 ABC:last-child: 선택자 ABC가 형제요소 중 막내라면 선택한다.
(아래의 경우, first-child와 마찬가지로, fruit 클래스의 막내 요소가 h3가 아니면 선택하지 않음)
Nth Child 선택자 ABC:nth-child(n): 선택자 ABC가 형제요소 중 n째라면 선택한다.
(아래의 경우, fruit 클래스를 가진 요소 중 2번째 요소를 선택함)
nth child 선택자에서 2n, 2n+1을 이용하면, 홀수/짝수 번째 태그들에 대해 스타일 지정할 수 있다. (n은 0부터 시작하므로 n+2 등 여러가지로 응용하여 사용할 수 있음)
Not 선택자 ABC:not(XYZ): ABC요소 중 선택자 XYZ가 아닌 것을 선택한다.
(아래의 경우, fruit 클래스의 전체 요소 중 span 태그가 아닌 것을 선택함)
🚩가상 요소 선택자
- 선택 된 요소의 앞/뒤에 특정 Content를 삽입할 때. (빈 값("")이라도 넣어 주어야 적용됨)
- 의미없는 태그를 만들지 않고, 요소를 삽입할 수 있다는 장점. (예를 들어, 메뉴에 Hot, 추천 등을 별도의 태그 생성없이 추가할 수 있음)
Before 선택자 ABC::before 선택자 ABC요소의 앞에 내용(content)을 삽입한다.
(아래의 경우, box 클래스 요소의 앞에 "앞!"이라는 content를 삽입함)
After 선택자 ABC::after 선택자 ABC요소의 뒤에 내용(content)을 삽입한다.
(아래의 경우, box 클래스 요소의 뒤에 "뒤!"이라는 content를 삽입함)
🚩속성 선택자
특정 속성을 갖고 있는 태그를 선택할 때.
Attribute 선택자 [ABC]: 속성 ABC를 포함한 요소를 선택한다.
(아래의 경우, disabled를 속성으로 갖는 요소를 선택함)
Attribute-Value 선택자 [ABC="XYZ"]: 속성 ABC의 값이 XYZ인 요소를 선택한다.
(아래의 경우, type="password" 속성값을 갖는 요소를 선택함)
🧐 추가) 실습하면서 알게된 것.
- 가로 정렬: 속성 text-align 이용
<div style="text-align: center">hello</div>- 세로 정렬: 속성 margin, line-height 이용
- 글자 너비만큼만 배경색 추가: 속성 width 이용
<div style="background-color: green; width: fit-content;">너비만큼:-)</div>😏3일차 수업을 마치며...
아직까지는 이전에 얕게나마 혼자 공부했던 부분이라 수업과 실습 모두 무리없이 따라가고 있다 후하
점점 벨로그 작성에도 익숙해지고 있고.. (매 수업때마다 작성하는 걸 목표로 잡긴 했는데, 나.. 할 수 있겠지?)
백엔드 수업 들어가면 굉장히 혼란스러운 하루하루를 보낼 것 같은 느낌이지만.. 지금은 그때를 대비해서 수업과 복습하는 방식에 익숙해지는 과정이라 생각하고 차근차근 쌓아 올라가야겠따
그리고 1주차가 끝나면, 주말에 전체 복습을 꼭 하고 넘어가야 할 것 같다.
한번에 많은 내용을 듣다보니, 이론 자체는 이해하더라도 막상 혼자 코드를 작성할 때에는 잘 떠오르지 않아서ㅠㅠ 일단 이번주는 일요일에도 복습하고 넘어가장:-)