오늘은 <display> 태그에 대해 알아보려고 한다.
1.<display> 태그
속성명은 display, 속성 값은 none/block/inline/inline-block 중 하나 선택
화면에 요소 표시하는 방식- 웹 문서를 보여주는 방식과 관련, 그래서 HTML 태그가 아니라, CSS 속성에 해당함
| 속성 | 속성값 | 내용 |
| disply | non | 화면에 표시X (영역 차지X) |
| block | 블럭 요소로 표시, 너비/높이 설정 가능 | |
| inline | 인라인 요소로 표시, 너비/높이 설정 불가 | |
| inline-block | 인라인 요소이나 너비/높이 설정 가능 |
인라인 방식, 내부 스타일시트 방식, 외부 스타일 시트 방식 중 원하는 방식 선택
예) 내부 스타일 시트 방식- <head> 태그에 <style> 태그를 쓰고 그 안에 디스플레이 방식 정함
| <head> <style> 선택자 { display : inline ; } </style> </head> |
2.display 속성 사용전 파일
① 메모장열기
② 아래와 같이 코드를 입력
③ [파일 > 다른 이름으로 저장]
④ 파일을 저장할 위치를 선택/ 파일 이름 "display.html" 입력
⑤ 저장한 파일을 더블 클릭
⑥ 웹 브라우저에서 작업물 확인
3.display 속성 사용
display 속성 사용하여 블록 요소인 제목 <h1>은 인라인 요소로, 인라인 요소인 링크 <a>는 블럭 요소로 바꾸기
① 앞에서 만든 ex display.html 파일에 마우스를 놓고 오른쪽 버튼을 클릭 후, 연결 프로그램을 메모장으로 선택
② 아래와 같이 코드 추가입력
<h1>의 display 속성을 inline으로, <a>의 display 속성을 block으로 정함
③ [파일] > [다른이름으로저장]
④ 저장한 ex display-1.html 파일 더블 클릭
⑤ 브라우저에서 본문 확인
<h1>을 인라인 요소로 바꿨기 때문에 제목 다음에 줄 바꿈 없이 바로 본문 내용이 따라옮
<a>를 블록 레벨 요소로 바꿨기 때문에 링크 앞뒤 줄 바꿈 됨
3.display 연습
<body>
<ul id="gnb">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
</ul>
</body>
<style>
body {
font-family:;
font-size:22px;
font-weight:bold;
text-transform: uppercase;
margin:0;
}
#gnb {
background-color: #;
margin:0;
padding:0;
}
#gnb li {
display: inline-block;
}
#gnb li a {
color: #fff;
text-decoration:none;
padding:10px 20px;
display:block;
}
#gnb li a:hover {
background-color: ;
color:;
}
</style>
자신의 능력을 숨길 수
있는 것은 대단한 능력이다
-프랑수아 드 라 로슈푸코-
'일과공부' 카테고리의 다른 글
| [HTML/CSS 기초 강의] ⑯ <div> 태그 (0) | 2021.08.15 |
|---|---|
| [드론 기초] ③ DJI MAVIC MINI (0) | 2021.08.15 |
| [HTML/CSS 기초 강의] ⑭ <span> 태그 (0) | 2021.08.12 |
| [프리미어 기초] ① 프리미어초보 10분만에 편집하기(#영상컷편집#프리미어편집) (0) | 2021.08.11 |
| [드론 기초] ➁ 드론의 역할 (0) | 2021.08.07 |
