이번엔 블록과 인라인에 대해 공부했다.
1. 블록요소
1/ div,h1,p
2/ 사용가능한 최대 가로 너비를 사용
3/ 크기를 지정할 수 있음.
4/ width 100, height 0 으로시작
5/ 수직으로 쌓인다
6/ margin padding 상하좌우 사용가능
2. 인라인
1/ span,img
2/필요한 만큼 너비
3/크기지정 x
4/width 0 , height 0 으로 시작
5/ 수평으로 쌓임
6/ margin padding 위,아래는 사용불가
이다.
단순히 태그들의 종류(?)라고 이해했다.
대표적으로 div는 블록, sapn이 인라인이라 하나씩 비교해보자.
<!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">
<title>Document</title>
<link rel="stylesheet" href="./01_div.css">
</head>
<body>
<div>안녕하세요!</div><div>안녕하세요!</div>
<div>안녕하세요!</div>
<div>안녕하세요!</div>
</html>body{
margin : 0;
padding : 0;
}
div{
background : yellowgreen;
width : 100px; /* 인라인 요소 : 가로사이즈 설정 불가*/
height : 30px;
margin : 20px;
padding : 20px;
/* display : inline; <인라인 요소로 만듬 */
}
위에 말했던 속성들을 그대로 확인할 수 있다.
이번엔 인라인 요소이다.
<!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">
<title>Document</title>
<link rel="stylesheet" href="./02_span.css">
</head>
<body>
<span>안녕하세요!</span><span>안녕하세요!</span><span>안녕하세요!</span>
<span>안녕하세요!</span>
<span>안녕하세요!</span>
<div>동해물과 백두산이 마르고 닳도록</div>
</html>body{
margin : 0;
padding : 0;
}
span{
background : yellowgreen;
width : 100px; /* 인라인 요소 : 가로사이즈 설정 불가*/
height : 130px;
margin : 20px;
padding : 20px;
display : block; /*인라인요소 > 블럭요소*/
}
큰 특징중 하나가 padding 이 위아래로 적용안되는거 가만보면 애국가 1절이 붙어서 안녕하세요랑 같이 나오는걸 확인할 수 있었다.
메타데이터들은 크게 생각하면 주로 head부분에 와서 각 파일의 전반적인 기능?을 설정하는 듯한 느낌이었다.
<!DOCTYPE html> <!-- 이하의 내용을 html5 버전으로 적용하겠다.-->
<html lang = " ko">
<head>
<!-- 문서의 정보 -->
<!--
HTML 문서의 제목
기타 정보
스타일 직접 입력
스타일 외부에서 가져와서 연결
-->
<meta charset = "UTF-8"> <!-- 사실상 고정, 문자가 인코딩되는 방식-->
<title>
HTML요소 제목,레퍼런스
</title>
<base href="https://heropcode.github.io/GitHub-Responsive/"> <!--base태그 : 문서에 포함된 모든 상대url들의 기준 url-->
<meta name = "author" content="정민규">
<meta name = "description" content = "정민규의 사이트입니다!">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge"> <!-- -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 기기장치 가로 맞추기, 확대축소 사이즈-->
<link rel="stylesheet" href="./css/03_html.css" hreflang = "ko" ><!-- hreflang같은 경우 일반적인 경우 굳이 안함-->
<style></style> <!-- 보통 css파일로 함 // body태그 안에다 두어도 정상적으로 작동하긴 하나 효율적인 방식이 아님-->
</head>
<body>
문서의 구조
<img src="img/bg.jpg" alt="예제이미지">
<img src="img/feature-tile__build.png" alt="예제이미지2">
</body>
</html>헷갈리면 주석을 보러 오도록 해야겠다.
href를 사용해서 다른 폴더의 파일도 끌어올 수있고, base를 이용하면 조금 더 간편하게 사용할 수 있다는 점.
약간 일반 언어에서 변수설정하고 가져다 끄는 느낌이랑 비슷한 것 같다.
변수설정이란 거에서 아이디어가 와서 해봤는데 heaf1으로 새로 두고 해봤는데 적용이 안되는듯하다 ㅋㅋ 일반적인 언어랑은 문법이 조금 다른것 같다.
EUC-KR : 완성형 < 한글이 깨지는 경우가 발생할 수 있음. >
정 민 규
UTF - 8 : 조합형
ㅈ ㅓ ㅇ ㅁ ㅣ ㄴ ㄱ ㅠ
위는 euc-kr과 utf - 8의 차이이다. 이래서 한글 깨지는 사이트가 나오는걸 배운듯하다
'FrontEnd > HTML&CSS' 카테고리의 다른 글
| 06_멀티미디어(img,audio,video) (0) | 2021.10.31 |
|---|---|
| 05_HTML 인라인 요소 (0) | 2021.10.31 |
| 04_content 구분 & 문자콘텐츠 (0) | 2021.10.30 |
| 02_css 첫걸음 (0) | 2021.10.28 |
| 01_html 기초 (0) | 2021.10.27 |