html 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html 기본 태그
<p>글 본문</p>
<h1>글 제목</h1>
<img src="이미지 경로">
<a href="">링크</a>
<button>버튼</button>
<ul><li>리스트</li></ul>
<ol><li>리스트</li></ol><p></p>, <h1></h1>, 등등을 태그라고 한다.
용도에 맞는 태그를 사용하는 것이 '웹 표준'에 맞는 웹을 만들어낼 수 있다.
태그 안에 href, src 같은 속성을 넣을 수 있고, 태그 안에 태그를 넣을 수 있다.
간단한 스타일 설정
<p style="font-size : 20px; color : red"> 글자 </p>태그 안에 style 속성으로 간단한 스타일 설정을 할 수 있다.
자주 사용하는 스타일
{/*글자 스타일 조정*/}
font-size : 20px;
font-family : 'gulim';
color : black;
letter-spacing : -1px;
text-align : center;
font-weight : 600;
{/*이미지 스타일 조정*/}
display : block;
margin-left : auto;
margin-right : auto;
width : 150px;
텍스트 일부만 스타일 변경
<p style="text-align: center;"><span style="color: green;">Front-end</span> Developer</p>텍스트의 일부만 변경하고 싶은 경우에는 <span>태그를 활용한다.
<strong> 태그를 사용하면 글자가 굵게 변경된다.
css 파일 생성 후 html에 적용
<head>
<link href="css파일경로~~" rel="stylesheet">
</head>
css 파일에 클래스 생성
.profile {
width : 200px;
display : block;
margin : auto;
}
html 태그에 적용
<img src="/증명사진 파일.jpg" class="profile">
css selector 종류
.profile { font-size : 20px } /*클래스*/
#special { font-size : 30px } /*아이디*/
p { font-size : 16px } /*태그*/
css selector 우선순위
1. html 태그 안에 직접 style="" 지정
2. #id
3. .class
4. p
우선순위가 높은 것 부터 적용
div
html에 박스 생성
<div class="box">안녕하세요</div>
자주 사용하는 div 속성
.box {
margin : 20px;
padding : 30px;
border : 1px solid black;
border-radius : 5px;
}
inherit
<div class="box"> <!-- 부모 -->
<p> <!-- 자식 -->
<a href="https://github.com/Jo-KwanWoo">github address</a>
</p>
<p> <!-- 자식 -->
<a href="https://qweasd5123.tistory.com/">blog address</a>
</p>
</div>
.box {
margin : 20px;
padding : 30px;
border : 1px solid black;
border-radius : 5px;
{/* 아래 속성은 자식 태그에도 적용 */}
text-align: center;
font-size: 15px;
color: white;
}
'html, css' 카테고리의 다른 글
| [html, css] 6. Table (0) | 2025.02.16 |
|---|---|
| [html, css] 5. form & input (0) | 2025.02.15 |
| [html, css] 4. 반응형 width & box-sizing (0) | 2025.02.14 |
| [html, css] 3. position (0) | 2025.02.14 |
| [html, css] 2. 레이아웃 (0) | 2025.02.13 |