부트캠프 2주차!
커리큘럼을 보니 지난주 프리캠프는 css, html, javascript의 기본을 고루고루 배웠다면
이번주는 CSS를 더 깊게 파고드는 한주가 될 것 같다.
이번 강의에서는 생산성을 높여주는 기능을 먼저 소개했다.
1. emmet(태그와 클래스명을 한번에 입력하는 기능) : 아래와 같이 입력하면 div태그 생성과 함께 클래스도 함께 생성된다.
// div.wrapper__header 입력 시
<div class="wrapper__header"> </div>2. 태그 한번에 생성하기 : 태그 뒤에 *n 숫자를 입력하면 원하는 숫자만큼 태그가 생성된다.
//div*3 입력 시 총 3개의 div가 한번에 생성된다.
<div></div>
<div></div>
<div></div>
꿀팁
css 선택자
이번 강의에서는 선택자에 대해 배웠다.
HTML 태그를 CSS파일로 가져와서 사용할 때 다양한 선택자를 활용할 수 있다.
기본 선택자 개념
기본 선택자로는 tag, class, id를 불러올 수 있다.
//태그 선택자 : 태그명만 적으면 된다.
div {
color: blue;
}
button {
color: green;
}
// class 선택자 : 앞에 온점을 찍으면 된다.
.wrapper__title {
color: green;
}
// id 선택자 : 앞에 #을 붙이면 된다.
#title_id {
color: red;
}
자손 선택자
자손 선택자는 부모 태그 내에 있는 자식 태그를 선택할 때 사용한다.
우선 아래 기본 HTML을 기준으로 예를 들어보겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>연습</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="box1">
<h2 class="title" id="title_id">안녕하세요</h2>
<p class="contents1">테스트 중인 내용입니다</p>
</div>
<div class="box2">
<h2 class="title" id="title_id2">안녕하세요</h2>
<p class="contents2">테스트 중인 내용입니다</p>
</div>
</body>위 예제와 같을 때 CSS 선택자를 다양하게 활용할 수 있다.
1. 자식 태그 내에 class 선택할 경우
.box1 .title{
color: red;
}
2. 자식 태그 내에 id 태그 선택할 경우
.box1 #title_id{
color: yellow;
}
3. 두개 이상의 클래스 선택할 때
.contents1, .contents2{
color: blue;
}
가상 클래스 선택자
가상 클래스 선택자는 클래스를 선택하는 다양한 방법을 제공한다.
예제 HTML
<div class="box1">
<p>첫번째 P 태그</p>
<h2>안녕하세요</h2>
<p>세번째 P 태그</p>
<p>네번째 P 태그</p>
<span>첫번째 스팬</span>
<button class="button1">버튼</button>
</div>1. frist-child
자식 클래스 중 가장 첫번째 태그의 첫번째 자식을 선택한다.
아래와 같이 코드를 작성하면 '첫번째 p 태그'에 빨간색이 적용된다.
주의할 점은 두번째 태그인 h2:frist-child를 써도 적용되지 않는다.
.box1 p:first-child{
color: red;
}2. first-of-type
형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 선택한다.
first-of-type을 쓰면 h2의 첫번째 자식에 해당하는 태그를 선택할 수 있는 것이다.
.box1 h2:first-of-type {
color: blue;
}3.last-child
first-childr가 첫번째 태그를 선택한다면 last-child는 마지막 태그를 선택하는 가상클래스다.
.box1 p:last-child{
color: red;
}
4. nth-child(n)
가장 재미있는 가상클래스.
형제 요소 중 n번째 태그를 선택할 수 있다.
간단한 함수가 들어갈 수도 있는데, 예를들면 +,- 연산자를 사용해서 짝수번째, 홀수번째 자식 태그를 선택할 수 있다.
아래 예제는 3의 배수 자식들을 선택하는 연산자를 입력했다.
.box1 p:nth-child(3n) {
color: blue;
}5. hover
오버는 마우스 오버 시 나타나는 css 기능이다.
버튼 태그에 해당 가상클래스를 추가하면 마우스를 올릴 경우 UI가 변경되는 것을 설정할 수 있다.
button1:hover{
color: red;
}
위에 언급한 것 외에도 다양한 css 선택자가 있다.
'프로그래밍⚡️ > htmlcss' 카테고리의 다른 글
| [css] background와 object (1) | 2022.12.23 |
|---|---|
| css 캐스케이딩 - 스타일 적용 우선 순위 (1) | 2022.12.21 |
| 부트캠프 5일차! 회원가입 인증창 만들기 (0) | 2022.12.19 |
| [부트캠프] 1일차 ! (feat.HTML과 CSS) (0) | 2022.12.12 |
| 아스키(ASCII)코드와 유니코드(Unicode) (0) | 2022.10.12 |