CSS 시작
외부, 내부, 인라인 스타일이 있다.
1. 인라인 스타일
<div style="border:1px solid red; background-color:orange;">
content
</div>
2. 내부 스타일 (head 내부에)
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- internal css -->
<style type="text/css">
div {
background-color:aqua;
}
</style>
</head>
3. 외부 스타일 (head 내부에)
<head>
<!-- external css -->
<link rel="stylesheet" href="/htmlcssjs/resources/css/exam01_style.css">
</head>
→ resources폴더에 css폴더를 만들고 그 내부에 css파일을 만들어 정의해준다.
여러 html에서 사용할 것이라면, 외부 스타일 시트를 만들어 사용하는 것이 유용하다.
★ id속성은 전체 html파일에서 유일해야 한다.
★ class속성은 그룹명이라고 생각하고 사용한다. (class는 '분류','종류'의 의미)
<header>태그 → 이름대로 이 내용이 가급적이면 제목으로 사용해라라는 의미로 만들어짐.
<article>태그 → 이름대로 내용이 가급적이면 기사의 내용으로 작성하라는 의미
★ 선택자 사용방법
● id
#id { }
→ 해당 id를 갖는 태그의 속성을 정의할 수 있다. ( id는 하나만 사용. id는 겹치면 안된다! )
● class
.클래스이름 { }
→ 해당 클래스를 갖는 태그의 속성을 정의할 수 있다.
● tag
태그 { }
→ 해당 태그의 속성을 정의할 수 있다.
● *
* { }
→ 전체 태그에 속성을 정의할 수 있다.
● 그룹 (태그를 예시로 들었을 때)
태그, 태그. 태그, ... { }
→ 복수의 태그들의 속성을 정의할 수 있다.
● 추가적으로 공부 (W3Schools 사이트에서 선택자 사용방법 공부하기)
ex) .class1.class2 → class1도 적용되어 있어야하고 class2도 적용되어 있는 것
ex) .class1 .class2 → 부모와 자식의 관계. class1을 부모로 가지면서 class2인 것에 적용하라는 뜻. class1을 부모로 가진 class2들, class2밑의 class2들도 적용이 된다는 뜻이다.
ex) .class1 > .class2 → class1의 바로 밑의 class2에만 적용하겠다는 뜻이다.
★★ 레이아웃 ★★
margin → 한 컨텐츠의 바깥 부분의 볼륨
padding → 한 컨텐츠의 안쪽 부분의 볼륨
컨텐츠의 width 조절
※ px이란? 화면의 해상도.
가로가 1920px 세로가 1080px
border: 1px solid green;border-width: 1px;
border-style: solid;
border-color: green;위의 코드들은 같은 기능을 한다.
※ 폰트의 크기?
rem → root + em // root는 body
2em → 보통 브라우저 글자 크기(16px)의 두배
2rem → body태그 안에 글자의 사이즈가 정해졌을 때 그 사이즈의 두배
a:visited → a태그들 중에서 한번이라도 방문한 적이 있다면 ~~ 정의
(유사클래스라고 말함)
※ 블록 요소를 인라인 요소로 바꿀 수 있을까? (가능하다)
선택자 {
display: inline;
}
○ 테이블 요소
colspan="3" → 셀을 합친다는 뜻
○ 테이블 width: 100%; → 부모의 태그 폭 100%를 채워 넣어라는 뜻
○ border-collapse: collapse; → 셀과 셀의 간격을 타이트하게 해준다.
● nth-child(n)
nth-child(2)라면
<div>
<p>
<p> --> 이게 선택됨
<p>
</div>
■ display
<div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
<div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
</div>이렇게 감싸주면 서로 침범하지 않는다 (div의 예시)
→ 다른 태그들은 어떻게 사용할까? 지속적으로 사용하면서 경험해보자
▣ 중요 !! 이해하자!
float → 띄운다는 의미.
clear:both; → 왼쪽 오른쪽 float 속성을 해제한다. float을 사용하고 남은 공간들을 더 이상 사용하지 않겠다는 의미.
다음에 작성되는 태그는 해당 블록의 아래로 내려오게 된다.
HTML을 작성하다가 그 다음 div가 생각한대로 화면에 적용이 안될 때가 있을 수도 있다.
그런 경우 그전의 div가 float으로 띄워져 있었기 때문에 그 밑으로 들어가 안보일 수도 있는 것이다.
→ <p>와 <img>를 사용했는데, 이미지가 들어간 블록의 남은 공간을 어떻게 활용할 것인지에 따라 float을 잘 이해해놓아야 좋을 것 같다. exam09_float 계속적으로 복습하여 이해하자.
# 내일은 레이아웃, float 이어서 공부한다.
'JAVA' 카테고리의 다른 글
| 24일차 2024 - 3 - 29 (2) | 2024.03.29 |
|---|---|
| 23일차 2024 - 3 - 28 (0) | 2024.03.28 |
| 21일차 2024 - 03 - 26 (0) | 2024.03.26 |
| 20일차 2024 - 3 - 25 (Spring 시작) (1) | 2024.03.25 |
| 19일차 2024 - 3 - 22 (1) | 2024.03.24 |