엘리스 SW 엔지니어 트랙 2기
TIL(Today I Learned)이지만, 미루다 미루다 이제서야 조금씩 써봅니다.
CSS 선택자
- 선택자란, 많은 HTML 태그들 중에서 특정 태그를 선택하는 요소입니다.
- 특정 HTML 태그에 CSS 효과를 주기 위해 부여하는 선택자가 CSS 선택자입니다.
- 전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자, 복합 선택자 등이 있습니다.
클래스 선택자 vs 아이디 선택자
- HTML 문서에서 특정 id 속성값은 중복될 수 없습니다.
- 그러므로, 한 페이지 내에서 반복될 가능성이 있는 스타일들은 클래스 선택자를 사용하여 그룹핑하고, 단 한번 유일하게 적용되고자 하는 스타일들은 아이디 선택자를 사용합니다.
클래스, 아이디 선택자를 이용한 CSS 스타일링 예시
<!DOCTYPE html>
<html>
<head>
<title>WEB - Welcome!</title>
<meta charset="utf-8" />
<!-- css 파일을 link 태그를 이용하여 링킹 -->
</head>
<body>
<div class = "sentences">First Sentence</div>
<div class = "sentences">Second Sentence</div>
<div class = "sentences">Third Sentence</div>
<button id = "submit">Submit</button>
</body>
</html>/* css */
.sentences {
color : red;
font-size : 20px;
}
#submit {
background-color : lightgray;
width : 150px;
height : 50px;
}
또다른 예시 코드들
p {
/* px 대신 em을 쓰면 보여지는 그 화면의 기준 단위에 일치하게 됨. 반응형 처리에 적절 */
font-size: 2em;
font-weight: bold;
/* color: #000000; */
/* rgb() 형식과 hex code 형식은 표현방식에서만 다르다. */
color: rgb(255, 87, 51);
/* rgb() 에 투명도까지 적용된 것이 rgba 이다. */
/* hsv, hsl 개념도 있다. */
}.charlie {
/* 그라데이션 배경 효과 (다양한 효과가 있다.) */
background: linear-gradient(skyblue, red);
/* flex 설정 후, 요소 가운데 정렬 */
display: flex;
justify-content: center;
align-items: center;
/*
vw, vh 단위 : viewport 기준! 창의 크기에 따라 알맞게 조정되므로, 반응형에 적절한 단위
현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환
*/
width: 100vw;
height: 100vh;
}'Log > Elice' 카테고리의 다른 글
| [엘리스 SW 엔지니어 트랙 2기] 엘리스 SW 엔지니어 트랙 2기 최종 후기, 3기 레이서 TIP (2) | 2022.07.29 |
|---|---|
| [엘리스 SW 엔지니어 트랙 2기] 알고리즘 문제 풀이 스터디를 마치며.. (0) | 2022.07.03 |
| [TIL] 웹, 웹의 동작원리, 웹 호스팅 (0) | 2022.06.28 |
| [TIL] HTML 구조 (0) | 2022.06.26 |
| [엘리스 SW 엔지니어 트랙 2기] 역량테스트 점수 공개 (0) | 2022.03.18 |
