*속성(Attributes) 과 값(Value)
<img> 이미지 -->어떠한 이미지
<img src = "경로" alt="대체 텍스트(이미지가 제대로 나오지 않았을떄)">
<div> 분할 (딱히 의미가 없음)
<div class="태그 별명">홍길동<div>
*부모 요소 자식요소
<부모>
<자식></자식>
</부모>
자식이란 요소가 들어가 있음.
부모와 자식의 관계
*빈 태그(empty tag)
ex) <img>
/가 붙는빈 빈 태그
/가 안붙는 빈 태그
html5버젼에선 두가지형태 다 사용가능하지만
혼용해서 사용하지말자.
*DOCTYPE(DTD)
<html>
<head>
문서의 정보
</head>
<body>
문서의 내용
</body>
</html>
DOCTYPE(DTD) document type definition
버전을 지정함
*HEAD 태그(TITLE,META,LINK,STYLE,SCRIPT)
TITLE (웹 페이지의 제목)
HTML 문서의 제목을 정의합니다
웹 브라우저의 각 사이트 탭에서 이름으로 표시된다.
META (웹 페이지의 정보)
HTML 문서(웹페이지)에 관한 정보(표시 방식,제작자,내용,키워드 등) 를 검색엔진이나
브라우저에 제공한다. 빈(Empty) 태그이다.
LINK (CSS 불러오기)
외부 문서를 연결할 때 사용한다.
특히 HTML 외부에서 작성된 CSS 문서를 불러와 연결할 때 사용
빈 (Empty)태그이다.
rel = "현재 문서와 외부 문서와의 관계" 필수
href ="외부 문서의 위치를 지정"
STYLE (CSS작성하기)
CSS를 외부 문서에서 작성하여 연겨하는 것이 아니고 HTML문서 내부에 작성할떄 사용
SCRIPT (JS 불러오거나 작성)
HTML 문서에는 CSS,작성된 CSS를 <link> <style></style> 안에 작성 할수 있음
JS는 <script></script> 로 이러한 2가지 방식을 모두 사용할 수 있음.
*BODY 태그(div,image) 웹표준검사
DIV(막 쓰는 태그)
<div></div> 의 'div'는 division (분할)
문서의 부분이나 섹션을 정의한다.
특정 범위를 묶는 용도로 사용한다.
IMG (이미지 넣는 태그)
<img> 는 HTML 에 미ㅣ지를 삽입할 때 사용한다.
src = "(필수) 이미지의 URL"
alt "(필수)이미지의 대체 텍스트 지정"
*웹 표준 검사하기
W3C validator 에 접속하여 표준 여부를 판단
------------------------------------------------------
css 문법
div{
font-size : 20px;
color: red;
}
선택자 {
속성 : 값;
속성 : 값;
}
선택자의 역할
HTML에 CSS을 적용하기 위해 특정 요소를 선택하는 사인
*속성과 값
div {
color: red; /* 글자색은 빨강 */
font-size: 20px; /* 글자 크기는 20px */
width: 300px; /* 가로 너비는 300px */
margin: 20px; /* 바깥 여백은 20px */
padding: 10px 20px; /* 안쪽 여백은 위아래 10px, 좌우 20px */
position: absolute; /* 위치는 부모 요소기준, */
}
* 태그에 직접 작성하기(인라인)
이 방법은 html 태그에 직접 작성하기 때문에 선택자가 필요하지 않다.
<div style="color: red;"> 태그에 직접 작성</div> <!-- red -->
* HTML에 포함하기(내장)
CSS만 따로 작성하기 때문에 선택자가 필요하다.
<stlye></style>
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div> HTML에 포함1</div>
</body>
* HTML 외부에서 불러오기
CSS 코드를 와전히 분리할 수 있다.
분리된 하나의 CSS 파일을 여러 HTML 파일이 불러와서 사용할 수 있다.
<head>
<link rel = "stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML 에 외부에서 불러오기</div>
</body>
/* main.css */
div{
color: red;
}
*태그로 찾기
h1 {
color:red;
}
*클래스로 찾기
.클래스명{
color:blue;
}
*속성
width(가로 너비) 단위는 px을 사용한다
width: 300px
height(새로 너비) 새로너비를 지정한다
height: 150px;
font-size(글자 크기)
div{
font-size: 16px;
}
*여백
margin(요소의 바깥 여백)
div{
margin: 20px;
}
margin은 요소의 위, 아래,좌,우 모두 20px의 여백을 지정
세분화하기 위해 아래와 같이 한 방향씩 지정할 수도 있음
margin-top , right,bottom,left 이런식
padding(요소 내부 여백)
div{
padding: 20px;
}
margin 과 같이 한 방향씩 지정할 수 있다.
세분화하기 위해 아래와 같이 한 방향씩 지정할 수도 있음
margin-top , right,bottom,left 이런식
*색상
#color(글자 색상)
요소 내용(Text)의 글자 색상을 지정한다.
#background(요소 색상)
요소의 배경 색상을 지정합니다.
color는 글자의 색만 지정할 수 있으며, 요소의(배경) 색을 바꾸려면 background-color가 필요함
div{
background-color :red;
요소배경: 빨강;
}
'프론트 > html,css,' 카테고리의 다른 글
| CSS 예제 (0) | 2021.07.24 |
|---|---|
| HTML 예제 (0) | 2021.06.27 |
| 02 HTML & CSS / HTML 기본 (0) | 2021.06.27 |