728x90
HTML
1. Inline/Block 태그 차이점
1) 블럭 태그 (div)
블럭태그는 한줄 전체를 사용(블럭단위)
2) 인라인 태그 (span)
인라인 태그는 요소의 부분만 사용 ( 옆에 공간이 있으면 이어서 위치)
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTml Study</title>
</head>
<body>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
2. 목록, 리스트 태그
ul 태그
- ul태그는 순서가 없는 리스트 태그입니다.
- <ul> 요소에 속하는 각 아이템은 <li> 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현됩니다.
<ul>
<li>아메리카노</li>
<li>카페라떼</li>
<li>핫초코</li>
<li>차
<ul>
<li>녹차</li>
<li>홍차</li>
<li>자스민차</li>
</ul>
</li>
</ul>
ul 태그 점 없애기
리스트로 구역을 나누고 싶지만, 리스트가 아닌척 하고 싶을 때, 저 점을 없애면 됩니다.
css - list 스타일 바꾸기
li{
list-style: none;
}
CSS
1. Class 선택자와, 하위 태그 선택하기
Class는 태그에 이름을 붙혀준다.
더 디테일한 제어가 하고싶다면 id 선택자를 사용하면 된다. (참고 : https://thalals.tistory.com/50?category=495767)
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTml Study</title>
<style>
/* class 접근자 . */
.ParentDiv{
background-color: aqua;
}
</style>
</head>
<body>
<div class ="ParentDiv">
<div>div1</div>
<div>div1</div>
<div>div1</div>
</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
하위 태그를 제어하고 싶다면, 부모 클래스에서 자식태그를 제어할 수 있다.
<style>
/* class 접근자 . */
.ParentDiv{
background-color: aqua;
}
/* 부모 태그에서 하위 태그 선택 */
.ParentDiv > div {
background-color: brown;
}
</style>
2. 인라인 태그와 블럭 태그 border로 비교하기
각 태그에 border (배경줄)을 설정해 주면 각 태그들이 차지하는 칸을 확인할 수 있다.
<style>
/* class 접근자 . */
.ParentDiv{
background-color: aqua;
}
/* 부모 태그에서 하위 태그 선택 */
.ParentDiv > div {
background-color: brown;
border: 1px solid black;
}
.ParentInline > span {
background-color: aqua;
border: 1px solid black;
}
</style>
반응형
'html-css' 카테고리의 다른 글
| [FLEXBOX FROGGY] CSS 개구리 게임 3(14~20) (0) | 2021.08.09 |
|---|---|
| [FLEXBOX FROGGY] CSS 개구리 게임 2 (8~13) (0) | 2021.08.09 |
| [FLEXBOX FROGGY] CSS 개구리 게임 1 (1~7) (0) | 2021.08.09 |
| [Html/css] html,css 초간단 기초 문법 3 (Display, flex) (0) | 2021.08.06 |
| [Html/css] html,css 초간단 기초 문법 2 (패딩과 마진, 포지션) (0) | 2021.08.06 |