🗓️TODAY
- 디자인 타카
iOS vs Android_해상도와 사이즈 - 코딩 수업
웹 퍼블리싱 실시간 강의(2)
📒웹 퍼블리싱 실시간 강의(2)
CSS :
- HTML로 만든 구조에 스타일(디자인)을 입힌다
- 색상, 글꼴, 레이아웃 등을 정의하여 웹 페이지를 보기 좋게 만든다.
- 사용자의 다양한 디바이스 환경(PC, 태블릿, 스마트폰 등)에 적응하는 반응형 디자인 구현합니다
구조 *전체 구조는 rule set 라고 불린다.
p {
color: red;
}
p
선택자(Selector)
:누굴 꾸밀지 선택하는 이름표
Ruleset의 맨 앞
HTML에서 꾸밀 요소를 선택
ex) <p> 요소를 꾸미려면 선택자로 p를 사용한다.
color: red;
선언 (Declaration)
:무엇을 어떻게 꾸밀지 적는 규칙
Ruleset 안에 있는 한 줄의 꾸미기 명령.
ex) color: red;는 글자 색을 빨간색으로 바꾸는 규칙.
color
속성 (Property)
:무엇을 꾸밀지 결정하는 이름
글자 색깔, 크기, 여백 같은 것을 꾸밀 때 속성을 사용.
ex) color는 글자 색을 꾸미는 속성.
red
속성 값 (Value)
:어떻게 꾸밀지 정하는 값
속성이 실행되는 방식을 정한.
ex) color: red;에서 red는 글자 색을 빨간색으로 설정하는 값.
CSS Ruleset 작성 규칙
- 중괄호 {}로 감싼다
모든 선언은 { }로 감싼다. - 속성과 값은 콜론 :으로 연결
속성 이름과 값 사이에 :를 써요. ex) color: red; - 선언 끝에는 세미콜론 ; 사용
여러 선언을 작성할 때는 각각 끝에 세미콜론을 붙인다.
ex) p {
color: red;
font-size: 20px;
}
선택자의 종류
- 요소 선택자: HTML 태그 이름을 선택.
- 클래스 선택자: 여러 요소를 한꺼번에 꾸밀 때 사용.
<style>
.highlight {
color: orange;
}
</style>
<body>
<div class="highlight">적용할 부분</div>
</body> - 아이디 선택자: 특정 요소 하나를 꾸밀 때 사용.
<style>
. box {
border: 2px solid blue; /* 테두리 */
background-color: lightblue; /* 배경색 */
padding: 10px; /* 안쪽 여백 */
margin: 10px; /* 바깥쪽 여백 */
}
#unique-box {
border: 2px solid red; /* 테두리 */
background-color: pink; /* 배경색 */
padding: 10px; /* 안쪽 여백 */
margin: 10px; /* 바깥쪽 여백 */ }
</style>
<body>
<div id="unique-box">유일한 박스</div>
</body>
border 테두리
border: 두께 스타일 색상;
스타일은 solid(실선), dashed(점선), dotted(점), none 등 사용 가능.
.box { width: 200px; height: 100px; margin-bottom: 20px; /* 박스 간 간격 */
text-align: center; /* 텍스트 가로 중앙 정렬 */
font-size: 16px; /* 글자 크기 */ }
/* 실선 테두리 */
.border-solid { border: 2px solid black;
/* 두께 2px, 실선, 검정색 */
background-color: #f0f0f0;
/* 배경색 */
}
<div class="box border-solid"> 적용할내용 </div>
/* 점선 테두리 */
.border-dashed { border: 5px dashed red;
/* 두께 5px, 점선, 빨간색 */
background-color: #ffe4e1;
/* 배경색 */
}
<div class="box border-dashed"> 적용할내용 </div>
/* 테두리 없음 */
.border-none { border: none;
/* 테두리 없음 */
background-color: #d3f9d8;
/* 배경색 */
}
<div class="box border-none"> 적용할내</div>
fixed
요소가 브라우저 화면을 기준으로 고정.
스크롤을 해도 요소는 같은 위치에 남아 있습니다.
요소는 문서의 기본 배치 흐름에서 벗어나고,
HTML 문서의 흐름에서 공간을 차지하지 않습니다.
<style>
.fixed-box {
position: fixed; /* 화면에 고정 */
top: 10px; /* 화면 위에서 10px */
right: 10px; /* 화면 오른쪽에서 10px */
background-color: lightcoral;
padding: 20px;
}
p {
height: 800px;
}
</style>
<div class="fixed-box">고정하려는 내용</div>
폰트 변경하는 법
Google Fonts 사용
2일차 개인과제
자기소개 상세 페이지에 스타일 적용
🤔 오늘의 회고
분명 어제까지만 해도 음, 이정도 찍먹이면 괜찮군.
했는데!!!!
오늘은 중간에 혼이 나갔다.
그래서 과제도 내가 이해한 부분만 스타일 적용시켰다.
일단 코드 쓰고 안되면 이것저것 고쳐보면서
나름 원하는 결과가 나왔다.
(근데 개발자 분들은 이걸로 어떻게 표현하시는거지?)
'TIL' 카테고리의 다른 글
| 24.12.16_TIL (1) | 2024.12.16 |
|---|---|
| 24.12.11_TIL (0) | 2024.12.11 |
| 24.12.09_TIL (2) | 2024.12.09 |
| 24.12.02_TIL (0) | 2024.12.02 |
| 24.11.28_TIL (2) | 2024.11.28 |