Day 07
요즘 비교적 따듯한 날씨였지만 어제부터 다시 추워지기 시작했다 손과 발은 시리지만
마음은 불태워보자🔥🔥🔥 오늘도 열공 가보자구!!
🏷 수업목차
- 선택자 3
- flex 레이아웃 2
- 실습 3
- CSS 상속
- 웹폰트
- 폰트
- 단위
📌 오늘의 내용
- 선택자
어제 배웠던 first-child 같은 가상 선택자를 더 배워보았다
<!--html-->
<div class="container">
<h1>이렇게</h1>
<p>자식이 있다면?</p>
<p>이번엔</p>
<h2>다른걸</h2>
<p>해볼거야</p>
</div>/* p타입 태그중 첫번째 요소 */
.container p:first-of-type{
background :red
}
/* 모든 형제 요소중 첫 요소*/
.container p:first-child {
background :red
}이렇게 위 두 가지 css가 있지만 현재 적용되는 코드는 first-of-type뿐이다
first-child는 모든 요소 중 첫 요소를 선택하기 때문에 잘못된 코드라고 볼 수 있다.
그렇다면 지정해서 선택할 수 있는 방법을 알아보자!
<div class="container">
<p>1번</p>
<p>2번</p>
<p>3번</p>
<p>4번</p>
<p>5번</p>
</div>/*요소중 3번쨰 요소*/
.container p:nth-child(3){
color : red;
}
/*3번쨰 요소부터 나머지*/
.container p:nth-child(n+3){
color : red;
}
/*p요소중 3번째 요소*/
.container p:nth-of-type(3){
color : red;
}이 외에도 다양한 선택자가 있다
/*활성화 된 요소를 선택*/
.button1:active {
background: red;
}
/*입력창의 커서가 활성화 되어 있는 요소*/
.input1:focus {
background: green;
}
/*링크를 눌러 해당 경로를 방문한 기록이 있는 요소*/
.link1:visited {
color :red;
}이러한 선택자들을 전부 외울 순 없지만 자주 사용하는 선택자들은 외워두는 게 좋다!
그래서 css 선택자를 연습할 수 있는 CSS Diner를 풀어봤다!
초반 단계에서는 수월하지만 점점 올라갈수록 굉장히 어렵다.. 사이트 내에 힌트도 참고하고 정답과 해설을 올려 두신 분의 블로그를 찾아 이해가 안 되는 부분은 참고했다
- flex 레이아웃
flex 레이아웃에 대한 속성을 더 알아보도록 하자!
/* 기존 배웠던 속성들 */
flex-direction : row // 중심축의 방향을 결정
justify-content : center // 중심축 방향의 정렬 방식 결정
align-items : center // 중심축 수직 방향 정렬 방식 결정
/*새로 배운 속성들*/
flex-wrap : nowrap // 기본값은 nowrap이며 item들의 줄바꿈을 허용할 것인지 말 것인지 결정함
align-content : center // item이 두 줄 이상인 상태에서 정렬하는 속성
order : 0 // item의 순서 지정
flex-basis: auto; // item의 기본 사이즈 지정
flex-shrink: calc(); // 설정된 값에 따라 item 요소의 크기 축소
flex-grow: calc(); // 설정된 값에 따라 할당 가능한 공간 비율 선언이러한 속성들을 오늘 추가로 배웠다 하지만 이거 또한 모두 외울 필요는 없고
어떤 기능인지 이해하는 것이 우선이다!
- 상속
기본적으로 css는 부모 요소에 지정한 속성값을 자식 요소에게도 상속해서 적용한다
하지만 모든 속성이 상속되는 것은 아니다
이처럼 상속되는 속성이 있고 아닌 속성이 있다 이거 또한 전부 외울 필요는 없고 그때그때 적용하여 확인하거나 사이트를 통해 찾아보다 보는 것이 좋은 방법인 것 같다
- font
html 요소의 글씨체를 바꿀땐 font-family라는 속성을 사용한다
.선택자{
/* 폰트이름에 공백이 있는 경우 */
font-family:"폰트 이름","폰트 이름2","폰트 이름3"
/* 폰트이름에 공백이 없는 경우 */
font-family:폰트이름,폰트이름2,폰트이름3
/* 혼용해서 사용할 경우 */
font-family:폰트이름,"폰트 이름2"
}위처럼 사용할 수 있고 한 가지의 폰트만 사용해도 되지만 적용이 안되는 경우도 있기에 우선순위를 두어 사용하는 것이다
- 웹폰트
폰트 파일이 해당 유저의 컴퓨터에 설치되어 있지 않아도 적용시킬 수 있게 만들어진 폰트이다
가장 대중적으로 사용하는 방법인 구글 폰트 서비스를 이용해 보자
@import url('https://fonts.googleapis.com/css2family=Jua&family=Song+Myung&display=swap');
div {
font-family: 'Jua', sans-serif;
}구글 폰트 사이트 접속 후 맘에드는 폰트를 찾아 import해준 후 적용시키면 된다!
- font 속성
자주 사용하는 속성들에 대해 알아보자
font-size : 14px // 텍스트 크기 지정
font-weight : 600 // 텍스트 굵기 지정
text-decoration: underline // 텍스트에 장식용 선 추가
color: red // 텍스트 색상 지정
line-height : 1.8 // 텍스트 행간 설정
letter-spacing : 0.1rem // 텍스트 자간 설정
word-spacing : 2px // 텍스트 단어 간격 지정
text-align : center // 텍스트 가로 정렬 방식 지정(블록요소나 표안에서)
vertical-align : top // 텍스트 세로 정렬 방식 지정(인라인요소나 표안에서)
text-inedent: 10% // 텍스트 들여쓰기 지정
text-transform: cpaitalize // 영문 텍스트 대소문자 변경
word-break: keep-all // 텍스트가 콘텐츠 박스 밖으로 넘칠때 줄바꿈 설정
overflow-wrap: normal // 단어가 콘텐츠 박스 밖으로 넘칠때 줄바꿈 설정
overflow: visible // 내용을 다 보여주기 힘들떄 보여질 방식 설정하루를 마치며 :)
이번 주 강의의 느낌은 지난주에 배운 css를 이론적으로 좀 더 알아보는 시간인 것 같다 어마어마하게 속성들도 많고 아직 모르는 게 너무나도 많은 것을 느낀다 자주 사용해 보고 또 찾아보고 하다 보면 막힘없이 툭툭 나오게 될 거 같다 이론이라고 쉽게 생각하지 말고 열심히 듣자고!!
