< 오늘의 진행 내용 >
1. CSS 개념학습
: CSS : 웹 페이지의 스타일을 정의하는 스타일시트 언어. ( HTML이 있어야만 동작이 가능함. )
: 직관적인 UI 구성으로 사용하기 편리하게 제작하는게 좋음.
: free app icon 을 이용해 무료 아이콘을 사용할 수 있음.
- CSS 문법 구성
1. Selector : 특정 요소 ( id, 클래스, 요소 이름 ) 선택
2. 선언 블록 : 요소에 적용할 내용( = 속성 ) 작성.
3. 속성 : 속성에 값을 부여해 스타일을 표현. ; 을 붙여 속성끼리 구분.
- CSS 파일 추가
<link rel="stylesheet" href="index.css" />1. <link> 요소 : HTML 파일과 다른 파일을 연결해 주는 역할.
2. rel : 연결할 파일의 역할이나 특징. (CSS 는 stylesheet)
3. href : 파일 위치 추가. (같은 폴더 : 파일 이름 입력, 다른 폴더 : 절대 경로 입력)
- CSS 스타일 적용 방법
1. 인라인 스타일 : HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법.
해당 요소에만 스타일을 적용 할 수 있음.
2. 내부 스타일 시트 : HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용하는 방법.
해당 HTML 문서에만 스타일을 적용할 수 있음.
3. 외부 스타일 시트 : 웹 사이트 전체의 스타일을 하나의 파일에서 변경하는 방법.
외부에서 작성된 스타일 시트 파일은 .css 확장자를 사용해 저장.
CSS 파일 추가와 같이 <head> 태그에 <link>를 사용해 외부스타일 시트를 포함시켜야 함.
* id와 class의 차이점
| id | class |
| #으로 선택 | .으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용
|
- 꾸미기
1. 색상 : color 속성에 16진수 값 부여.
ex) .클래스명 { color : #ff0000; background-color : #d3edda; border-color : #c3e5df; } //글자, 배경, 테두리 색상 부여)
2. 글꼴 : font-family 속성에 글꼴 부여
ex) .클래스명 { font-family: " 우선 글꼴 순위1 ", " 우선 글꼴 순위2 "....; } 입력된 순서대로 글꼴 적용
* https://fonts.google.com/ 링크에서 웹 폰트 다운 가능! ( link 를 통해 연결도 가능 )
3. 크기 : font-size 속성으로 글 크기 값 부여
ex) .클래스명 { font-size : 24px; }
4. 그 외 : 굵기: font-weight , 밑줄: text-decoration , 자간: letter-spacing, 행간: line-height
5. 정렬 : 가로 정렬: text-align , 유효한 값으로는 left, right, center, justify.
세로 정렬: vertical-align -> 부모 요소의 display 속성이 table-cell 일 때만 사용 가능
- 절대 단위와 상대 단위
1. 절대 단위 : px, pt .. , 상대 단위 : %, em, rem, ch, vw, wh ...
-> 절대 단위 : 환경에 영향을 받지 않는 경우 사용. (px..)
-> 상대 단위 :브라우저의 크기가 정해져 있는 일반적인 경우 사용. (사용자가 설정한 기본 글꼴이 있음) ( rem..)
ex ) 반응형 웹 : 디바이스 크기(width) 별로 CSS를 달리 적용 해야 함.(px..)
화면 고정 : 보이는 영역의 비율로서 크기를 설정. (vw, vh..)
2. 박스 모델
: 박스 모델 : 콘텐츠 들이 갖는 각자의 영역.
항상 직사각형이고 , 너비와 높이를 가짐. (width, height)
block 박스 : 줄바꿈이 됨. (width, height 지정 가능) ex) <div>, <p> ..
. inline 박스 : 줄바꿈이 되지 않고, 크기 지정이 불가능. ( width, height 지정 불가능 ) <span > ..
inline-block 박스 : width, height 지정이 가능하지만, 지정하지 않으면, 영역만 차지.
- 박스를 구성하는 요소
1. border (테두리) : 사용 예시 : p{ border : border-width(1px) border-style(solid) border-color(red); border-style mdn}
2. margin (바깥 여백) : 사용 예시 : p{ margin: 10px 20px 30px 40px; }
// p 요소 상우하좌에 여백 추가 , 2개 값만을 넣으면 각 상하, 좌우에 적용됨, 1개는 모든 방향.
// -2rem과 같은 음수값을 지정해 다른 엘리먼트와 겹치게 할 수도 있음.
3. padding (안쪽 여백) : margin과 사용방법이 동일함.
- 콘텐츠가 박스 밖으로 삐져 나오는 경우
-> 더이상 콘텐츠를 표시하지 않거나, 박스안에 스크롤을 추가해 해결할 수 있음.
overflow : auto; (스크롤 추가 ) , overflow : hidden ( 표시하지 않음 )
4. 박스의 최종 너비 : width + padding + border
-> 계산 할 수 있는 방법이 있음
: * { box-sizing : border-box; } // *는 모든 요소를 선택하는 셀렉터
-> context-box는 박스의 크기를 측정하는 기본 값
-> border-box는 여백과 테두리를 포함한 박스의 크기 계산법. (실제 차지하는 너비)
3. CSS Selector
- 기본 셀렉터 종류
-> 내가 원하는 요소만을 선택해 특정 속성을 갖게 할 때 사용
1. 전체 셀렉터 (* { } ) : 문서의 모든 요소를 선택.
2. 태그 셀렉터 ( h1 { } , section, div { } ) : 같은 태그면을 가진 모든 요소를 선택.
3. ID 셀렉터 ( #id이름 { } ) : #id명으로 입력하여 선택.
4. class 셀렉터 ( .class이름 { } ) : .class명으로 입력하여 선택. 같은 class를 가진 모든 요소가 선택됨.
5. attribute 셀렉터 (a[href] { } , p[id="only"]{ } , p[class~="out"] { } ... ) : 같은 속성을 가진 요소를 선택
- 셀렉터 관계
1. 자식 셀렉터 (요소1 > 요소2 {속성 : 속성값;} ) : 첫번째로 입력한 요소 (기준 요소) 의 바로 아래 자식인 요소를 선택.
2. 후손 셀렉터 ( 요소1 요소2{ 속성: 속성 값; }) : 기준 요소의 자식요소 모두를 선택.
( 바로 아래 자식 뿐만 아니라 내부의 같은 요소 모두 선택)
3. 형제 셀렉터 ( 형제요소1 ~ 형제요소2 { } ) : 부모요소를 공유하는 형제 요소 중 2번째 요소 모두 선택.
4. 인접 형제 셀렉터 ( 형제요소1 + 형제요소 2 { } ) : 형제요소 2의 첫번째오는 요소만을 선택.
- 기타 셀렉터
1. 가상 클래스 셀렉터 : 요소의 특정 상태에 따라 요소 선택
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택 */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택. */
a:focus { } /* 포커스가 들어와 있을 때 선택. */
2. UI 요소 셀렉터 :
input:checked + span { } /*체크 상태일 때 선택. */
input:enabled + span { } /*사용 가능한 상태일 때 선택. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택. */
3. 구조 가상 클래스 셀렉터 :
p:first-child { } // 형제 요소 그룹 중 첫번째 요소를 나타냄
ul > li:last-child { } // 형제 요소 그룹 중 마지막 요소를 나타냄
ul > li:nth-child(2n) { } // 형제 요소 그룹 중 짝수째 요소를 나타냄
section > p:nth-child(2n+1) { } // 형제 요소 그룹 중 홀수 요소를 나타냄
ul > li:first-child { }
li:last-child { } // 형제 요소 그룹중 마지막 자식인 것 모두 나타냄
div > div:nth-child(4) { }
div:nth-last-child(2) { } /// 형제 요소 그룹중 마지막 에서 2번째 자식인 것 모두 나타냄
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
4. 부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
5. 정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }
* 팁 : text를 중앙정렬 하고 싶을 때 ->text-align : center; height :200px ; 에서 line-height:200px; 을 추가해 준다.
* 사진 옆에 글을 넣고 싶으면 position 속성을 이용한다.
* CSS 초기화 : * { margin : 0 ; padding : 0; box-sizing: border-box; }
< 느낀 점 >
CSS의 셀렉터 종류 예제를 풀어보며, 가장 중요한 셀렉터 구분은 셀렉터 관계를 통해 대부분 기타로 나뉘어 진다는 것을 알게 되었다. 내용을 진행하며 생각보다 많은 셀렉터의 종류에 살짝 힘들다고 느꼈지만, 연습 문제를 풀어보며, 대부분은 last child 라든가 ntn child, first child 2n 등 단어만 알면 내가 원하는 셀렉터를 기본 관계에 대입해 고를 수 있었다.
이론적인 부분을 공부하고 나서, CSS 를 이용한 자기소개 페이지를 작성했을 때 , 바로 작성되지 않았다.
예제를 다시 찾아보며 개념을 다시 익히며 작성해야 한다는 것이 살짝 번거롭게 느껴졌지만, 막상 과제를 하고 나니 개념이 더 잘 들어왔다.
특히 과제를 제출하기 위해 여러 속성들을 찾아봤을때 , 이 학문은 많이 해보고 익숙할 수록 쉬워질거란 긍정적인 생각이 들었다.
과제를 제출할 때마다 다른 사람들의 것을 보고 이런 속성도 있었구나 생각하며 더 도움이 됐다.
'프론트엔드 블로깅 챌린지 > FE' 카테고리의 다른 글
| SEB_FE 블로깅 챌린지 _ 6일차 (JavaScript 기초 1) (0) | 2023.02.20 |
|---|---|
| SEB_FE 블로깅 챌린지 _ 5일차 (CSS와 HTML을 이용한 계산기 만들기) (0) | 2023.02.17 |
| SEB_FE_44기 블로깅 챌린지 _ 4일차 (CSS 기초와 Selector_2) (1) | 2023.02.16 |
| SEB_FE_44기 블로깅 챌린지 _ 2일차 (웹 개발 기초와 HTML) (0) | 2023.02.14 |
| SEB_FE_44기 블로깅 챌린지 _ 1일차 (0) | 2023.02.13 |
