반응형
이상하리만큼 다시 HTML,CSS 공부를하게되면 내가 작아지는 느낌이든다. 기초라고 생각하지만
늘 잊어먹는 언어들..심기일전 하는 마음으로다시 기초부터 한번싹 공부를 하고 기록해보자.
특히 사소하지만 잊고 있던거, 주요한 내용들 최대한 한번더 봐보도록하자
- HTML은 마크업언어
자료의 구조를 표현하기 위한 언어
<!-- HTML은 마크업언어, 자료의 구조를 표현하기 위한 언어 -->
<h1>안녕하세요2</h1>
<!-- heading의 약자 -->
<p> 글자는 p안에 써야한다.</p>
<!-- paragraph약자 -->
- 태그 스타일
1)스타일은 각 태그에 인라인으로 줄 수 있다.
스타일 속성은 매우 다양함 하지만 그때 그때 검색해서 찾아쓰는게 맞다.
<img src="my.jpg" style="width: 100px;
margin-left:auto; border-radius: 40px;
margin-right: auto; display:block;">
<!-- 이미지 가운데 정렬 3가지 margin, display -->
<h3 style="text-align: center;">김지원</h3>
<!-- 폰트 종류는 font-family -->
<!-- 자간은 letter-spacing -->
<p><span style="color:red;
font-weight: 900;">Front-end</span> Developer</p>
<!-- span은 글자안에서 쓰는 의미없는 태그
일부만 만지고 싶을 때 --><span>태그는 글자안에 쓰는 의미없는태그, inline 속성을 가지고 있다.
inline을 가지고 있는 요소는 폭, 높이등을 단독으로 조절할 수 없어서 겉에 <p>태그 등에 주어야 한다.
그리고 글자안에서 일부만 변경하고 싶을 때 사용도 가능하다.
<p>안녕하세요 <span style="color : blue;">프론트엔드</span> 개발자입니다.</p>
자주 사용하는 글자 스타일들
font-size : 20px;
font-family : 'gulim';
color : black;
letter-spacing : -1px;
text-align : center;
font-weight : 600;그외 Strong 등....
2)그리고 css 셀렉터의 우선순위
인라인 스타일 > #id > .class >p 순서
.content {
text-align: center;
}
p{
color:green
}
#special{
text-align: center;
color:blue;
}
3)block속성태그 - div, p , h 등 가로를 전부 차지한다
block속성 가운데 정렬하는 tip
display: block;
margin-left: auto;
margin-right: auto;
위세개를 기본으로 사용한다.
이미 블록 속성을 가지고 있으면 display:block;은 빼줘도됨
display : block;
margin-left : auto;
margin-right : auto;
width : 150px;
이와같이 사용
4)inhiert - font-size, font-family, color등은 inhire된다.
ex) div 태그안의 p태그
<div class="box">
<p>프론트엔드 개발자 김지원</p>
</div>5)margin, padding
margin - 상하좌우여백
padding - 상하좌우 안쪽 여백
6)div - 박스 만들고 싶을 때 사용한다.
- CSS파일 밖으로 빼내기
외부에 css파일을 빼내고 link태그로 css파일을 불러올 수 있다.
.profile {
width : 200px;
display : block;
margin : auto;
}
.title{
text-align: center;
}
.content {
text-align: center;
}
/* p{
color:green
}
#special{
text-align: center;
color:blue;
} */
.box {
margin : 20px;
/* 상하좌우 여백 */
padding : 30px;
/* 상하좌우 안쪽 여백 */
border : 1px solid black;
border-radius : 5px;
/* 박스 가운데정렬 근데 block은 이미 있어서 없어도됨*/
/* 가로행 전부를 차지해달라는것 div,p,h태그가 그렇다. */
display: block;
margin-left: auto;
margin-right: auto;
font-size:12px;
text-align: center;
box-shadow: 5px 5px;
/* font-size,font-family,color이런것들은 inherit된다. */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./main.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<img src="my.jpg" class="profile">
<h3 class="title">김지원</h3>
<p class="content">Front-end Developer</p>
<div class="box">
<p>프론트엔드 개발자 김지원</p>
</div>
<!-- 네모 박스 넣고싶으면 div쓰면됨 -->
</body>
</html>
반응형
'HTML,CSS' 카테고리의 다른 글
| HTML, CSS 셀렉터, Navbar만들기 (0) | 2023.04.21 |
|---|---|
| HTML, CSS 기초 float, inline-block (1) | 2023.04.21 |
| 포이머웹(poiemaweb) CSS 정리 12~22 (0) | 2022.06.28 |
| 포이머웹(poiemaweb) CSS 정리 1~11 (0) | 2022.06.22 |
| 포이머웹(poiemaweb) HTML 정리 (0) | 2022.06.20 |
