4강
CSS는 Cascading Style Sheet의 약어로 스타일 보관 파일입니다.
CSS 파일에 스타일을 보관하기 위해서는 다음과 같은 방법을 이용합니다.
- <head> 태그 안에 <link> 태그를 이용하여 CSS 파일을 연결합니다
- CSS 파일에 스타일을 작성하고, 작명합니다.
- .profile { width: 100px; display: block; margin-left: auto; margin-right: auto; }
- HTML 파일에서 작성한 스타일을 이용하기 위해서는 class를 작명합니다.
- class는 점을 찍고 작명합니다. 이름 중복을 피해야 합니다.
- <img src=”lion.png” class=”profile”> CSS .profile { }
- p, h2, #special 이러한 형식으로도 스타일을 적용할 수 있습니다.
- ex) p { } #: id - 주로 JavaScript에서 사용 ex) #special { text-align: center; }
- 클래스 selector는 .클래스명{} → 모든 class=”클래스 명”을 가진 요소에 스타일을 적용 가능
- 아이디 selector는 #아이디명{} → 모든 id=”아이디명” 속성을 가진 요소에 스타일을 적용 가능
- 태그 selector는 p {스타일~} → 모든 <p> 태그에 스타일을 적용 가능
- 스타일이 겹칠 경우 우선순위에 따라 정해집니다. style="" > #id > .class > p:tag
5강
<div> 여백
- margin: 상하좌우 여백
- padding: 상하좌우 안쪽 여백
네모 박스 삽입하고 싶으면 <div></div> 태그입니다.
<div> 특징
- border: 테두리
- border: 4px solid black;
- border-radius: 테두리 둥글게
- border-radius: 5px;
<div> <p> <h> <h1> <li> 등 특징
- display: block 의 의미는 가로행을 전부 차지
- p태그나 div 태그 등을 사용하게 되면 한 행을 전부 차지하게 됨
- display:block 기본으로 가지고 있음
- 그외에 display:line, line-block, flex 등 다른 기능이 있다.
일부 스타일은 자동으로 부모 → 자식 inherit(상속) 된다.
주로 글자와 관련 스타일들이 inherit(상속)된다.
- font-size
- font-family
- color
- text-align
- 등등
📚5강 숙제
상자에 쉐도우 효과 넣기
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
6강
레이아웃
- 가로 배치 - float
감싸는 container 박스를 만들면 유용함 / 최대 width 정해서 하는게 좋음 → 그래야 모바일에서 안넘침
- 부모 태그의 width의 100%
- .header { width: 100% }
- <div> 는 display: block를 내장함 가로 배치하고자 할 때 float 사용
- div를 가로 배치할 때 float 사용
- float:left → 요소를 띄워서 왼쪽으로 정렬
- clear: both
- float 다음에 오는 요소에게 주면 float로 발생하는 이상한 현상 해결 가능
- float를 주면 그 요소가 붕 뜨기 때문에 다음 요소가 그 자리에 위치함.
- clear: both를 주면 그 문제가 해결 된다
- 버그 방지를 위해 float: none; 추가하는 게 좋음
float 를 준 후 → clear: both를 주기 전
float 를 준 후 → clear:both를 주었을 때
HTML
<body>
<div class="container">
<div class="header"></div>
<div class="left-nav"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
</body>
CSS
.container {
width: 800px;
}
.header {
width: 100%;
height: 100px;
background: orange;
}
.left-nav {
width: 30%;
height: 700px;
background: blueviolet;
float: left;
}
.main {
width: 70%;
height: 700px;
background: burlywood;
float: left;
}
.footer {
width: 100%;
height: 100px;
background: darkred;
clear: both;
}
7강
레이아웃
2. 가로배치 - inline-block
display: inline-block - 내 크기만큼 차지(어울림)
inline-block를 사용하게 되면 공백이 생겨 공백 제거를 해야함.
inline-block 사용 시 공백제거 방법
- 박스 사이 주석 기호 활용
<div class="container"> <div class="header"></div> <div class="left-menu"></div><!--
--><div class="right"></div> <div class="footer"></div> </div>- 부모태그에 font-size: 0px;참고) 부모 태그로부터 inherit 되는 스타일은 중요도가 가장 낮음
- inherit 되는 속성이라 부모에 포함된 자식태그들은 모두다 font-size가 0px이 된다.
<div class="container" style="font-size: 0px">
<div class="header"></div>
<div class="left-menu"></div><div class="right"></div>
<div class="footer"></div>
</div>
- <div> 배치 후 박스 안에 글씨를 쓰면 아래 그림과 같이 나타남
- 아래와 같은 현상이 일어나는 이유
- html에는 글씨를 쓰면 baseline이 가상으로 존재함.
- baseline이 옆에 존재하면, display:inline-block 요소들이 날뜀
- display: inline-block 요소들이 baseline 위에 오려고 함
- 이러한 현상을 없애기 위해서는 vertical-align: top를 사용
- vertical-align : 상하정렬 하는 기능
- 글자를 정렬하는 것
- top : 위로 정렬
- bottom : 아래로 정렬
- display: lnline-block or lnline 인 요소에만 적용이 가능함
'HTML & CSS' 카테고리의 다른 글
| 2023.05.04 CSS 기본 개념 (0) | 2023.05.05 |
|---|---|
| 2023.05.03 CSS 기본 개념 (0) | 2023.05.04 |
| 2023.05.02 CSS 기본 개념 (0) | 2023.05.03 |
| 2023.05.01 HTML 기본 개념 (1) | 2023.05.02 |
| 2023.04.07 HTML 기본 개념(1) (2) | 2023.04.07 |
