1. 문단, 텍스트 서식
- h1~h6 제목 태그
- p / br 문단 구분, 줄 바꿈 / br은 특별한 경우 아니면 쓰지 않는 것을 추천!
- b / strong 굵게 (strong은 시각장애인을 위한 html 작성 시에도 쓰임)
- u 밑줄
- s / del 취소선 (del은 시각장애인을 위한 html 작성 시에도 쓰임)
- big / small 글자 크게, 작게
- sup / sub 위 첨자, 아래 첨자
- mark 형광펜 배경 글자
- hr 수평선
2. 목록
순서가 있는 목록 : ol > li
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
순서가 없는 목록 : ul > li
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
중첩 시 자식 노드는 li 안으로 들어가야 한다 (Navigation bar 등을 만들 때 드롭다운을 하기 위해 필요)
<ol>
<li>방콕 쇼핑 리스트</li>
<li>방콕에서 반드시 들려야 할 베스트
<ul>
<li>씨암</li>
<li>카오산 로드</li>
</ul>
</li> <!-- 이렇게 감싸고 있어야 함 -->
<li>방콕 맛집 리스트</li>
<li>방콕 관광 리스트</li>
</ol>
3. 링크, 이미지
a
외부 링크, 파일 링크
href (hyperlink reference)
<a href="http://www.naver.com/">Naver</a>추가 속성
target : _blank 새 탭으로 열기
title : 링크 설명
img
이미지
src(source) / alt (alternative)
<img src="images/google.png" alt="Google">
링크와 이미지 중첩하기
a > img
<a href="https://www.google.com/"><img src="images/google.png" alt="Google"></a>
<a href="https://www.daum.net/"><img src="images/daum.png" alt="daum"></a>
<a href="https://www.naver.com/"><img src="images/naver.png" alt="naver"></a>
4. CSS
CSS란? HTML 태그를 선택해서 디자인하고 배치하는 역할
링크하는 방법
1. 내부 스타일 : html파일 <head>...</html> 사이에 <style>...</style>
2. 외부 스타일 : html파일 ... <head>...</html> 사이에 css파일 링크
5. CSS - 선택자
5-1) 태그 선택자
p {
font-size: 50px;
color: red;
}
5-2) 클래스 선택자
.mycontent {
text-align: center;
font-size: 30px;
}
5-3) 아이디 선택자
#mycontent {
text-align: center;
font-size: 30px;
}
5-4) 태그+클래스 or 아이디
<p>안녕하세요</p>
<p class="test">연습용입니다</p>
<p id="test">화이팅합시다</p>
<div class="test">아자아자!</div>p {
text-align: center;
color: red;
}
p.test {
text-align: right;
color: blue;
}
#test {
text-align: left;
color: green;
}
p태그에 id나 class를 주게되면 p태그 안의 속성은 무시되고 id 값에 있는 속성이 적용이 된다.
만약 div class="test"에는 test에 있는 css속성을 주고싶지 않으면 p.test처럼 해당 class네임을 태그 앞에 붙여서 사용하기도 한다
5-5) 그룹 선택자
h1, p {
text-align: center;
color: green;
}css 속성이 완전히 일치하는 선택자가 있을 경우 위처럼 한 번에 작성한다.
5-6) 전체 선택자
* {
color: blue;
}전체에 공통으로 적용할 때 사용한다.
5-7) 하위 선택자
<h1>연습용</h1>
<p>안녕하세요
<b>굵은글씨</b>
</p>h1, p{
color: orange;
text-align: center;
font-size: 30px;
}
p b {
color: blue;
}
> 혹은 공백 으로 하위 선택자에 대해 설정할 수 있다.
6. CSS 적용 우선순위
!important > 인라인 > 아이디 > 클래스 > 태그
ex1)
<h1 class="text">TEXT</h1>
h1 {
color: red !important;
}
.text {
color: blue;
}
우선 순위 상으로 클래스가 태그보다 위에 있지만 !important를 적어주었기 때문에 최우선순위가 달라졌다
ex2)
<h1 id="text" style="color : gold">TEXT</h1>
#text {
color: green;
}
id 선택자보다 인라인이 우선순위가 높기 때문에 색상이 gold로 출력이 되었다.
7. CSS - 서식
line-height는 일반적으로 em(상대적 단위) 을 사용한다.
px을 사용해서 지정한 경우 font-size값을 변경했을때 line-height 도 비율에 맞을 수 있도록 px을 찾아야하는데 em을 사용하면 현재 사용중인 폰트 사이즈를 기준으로 상대적으로 크기를 지정하기 때문이다.
color 에서 rgb(0, 0, 0, 0.5)값을 적용하고 마지막 4번째는 투명도이다
text-align의 justify는 양쪽 정렬이다
8. CSS - 목록 스타일
disc ● circle ○ square ■ none 등등
1. list-style-image: url(아이콘 이미지경로)
2. 가상클래스 before 이용해 변경
<ul class="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
.menu li::before {
content: '◐';
}
9. CSS - 자손, 자식 선택자
'스페이스'는 자손선택자
'>'는 자식선택자
<div class="box">
<div>
<div></div>
</div>
</div>
.box {
border: 1px solid red;
width: 400px;
height: 400px;
}
.box div {
border: 1px solid blue;
width: 200px;
height: 200px;
padding: 20px;
}
가장 상위 영역은 box클래스이고 빨간 윤곽선이다. .box div 에 의해서 그 아래 자식선택자, 자손선택자까지 파란 윤곽선의 영역으로 표시된 것을 알 수 있다.
즉, '스페이스바'로 css선택자를 설정하면 '자손선택자'들을 모두 select한다.
.box {
border: 1px solid red;
width: 400px;
height: 400px;
}
.box > div {
border: 1px solid blue;
width: 200px;
height: 200px;
padding: 20px;
}
이번에는 '>'를 이용해 자식 선택자를 지정하였다. 한 단계 아래의 선택자만 선택하였기 때문에 한 개의 파란 상자만 출력되었다.
.box {
border: 1px solid red;
width: 400px;
height: 400px;
}
.box > div {
border: 1px solid blue;
width: 200px;
height: 200px;
padding: 20px;
}
.box > div div{
background-color: #000;
width: 50px;
height: 50px;
}
자식 선택자, 또 그의 자식 선택자까지 설정을 해서 위와 같은 결과가 나왔다.
'🎨 Web_Front end > HTML & CSS3' 카테고리의 다른 글
| HTML 시멘틱 태그와 CSS포지션 속성 (0) | 2023.10.26 |
|---|---|
| 포지셔닝(float, overflow, clear) (0) | 2023.10.25 |
| HTML 인라인 요소, 블록 요소, 인라인블록 요소 (0) | 2023.10.25 |
| CSS 박스모델 (0) | 2023.10.24 |
| CSS 스타일 속성 기본 (0) | 2023.04.05 |
