HTML
1.HTML 이란?
- 웹페이지를 구성할 때 사용한다.
2.HTML 요소
- HTM은 태그 한쌍(+속성)으로 이루어져있다.
- 하나의 태그안에 다른 태그가 들어있는 중첩요소도 가능하다
<태그 속성="값">hello <태그2>World<태그2>!</태그>
3.HTML 구조
- 크게
<head></head>태그와<boody></body>태그로 나누어져있다 - head 태그에서는 눈에보이지 않는 메타데이터, body 에는 눈에보이는 내용이 들어가있다.
- 의미없는 div태그를 사용해도 되지만, 구조적인 시멘틱태그를 이용하는 것이 좋다.
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <header> 상단부분(헤더) <nav> 웹페이지의 링크를 가지고있는 메뉴<nav> </header> <main> 주요내용 <aticle> 한 주제에 대한 정보를 묶을수있음 <section>특정한 섹션</section> </atlcle> <aside>부가적인정보</aside> <main> <footer> 말단 </footer> <body> </html> - body의 구성
4.HTMl 태그의 분류
element vs container
- container 태그에 element태그를 담을수있다.
block vs inline
- block태그는 한줄을 꽉 차지한다
- inline태그는 컨텐츠크기 만큼만 자리를 차지한다
5.기본적인 태그
<strong></strong> -> 글자 굵게
<u></u> -> 글자에 밑줄
<h1~6></h1~6> -> 제목을 나타나는 태그
<br> -> 단순한 줄바꿈 태그, 닫는 태그가 없다
<p><p/> -> 단락을 표현하는 태그, 정해져있는 여백만큼만 벌어진다.
<img> -> 이미지를 넣을 수 있는태그. 닫는 태그가 없으며 대신
속성 사용이 가능하다. 속성은 태그의 이름만으로 부족할 때 사용.
사용방법 : <img src='' , 값 = '' >
<ol></ol> : ordered list의 약자로 숫자나 알파벳 등 순서가 있는 목록을 만든다.
<ul></ul> : unordered list의 약자로 순서가 필요없는 목록을 만든다
->이때 생성된 목로그이 목록 내용의 <li></li>태그로 구성 하는데 list의 약자입니다.
<span></span> : 글자를 넣을 수 있는 의미 없는 태그
드래그 후 tap키를 누르면 들여쓰기가 가능하다.
<a></a> : 하이퍼링크를 걸어주는 태그
<a 태그의 속성
href : "클릭시 이동할 링크"
_self : "현재 페이지 (기본값)"
_blank : "새 탭">
HTML의 구조 태그
<html></html> : 브라우저에게 문서의 시작과 끝을 알려주는 말
<head></head> : 눈에 보이지않는 정보를 나타내는 범위
웹브라우저가 해석해야 할 페이지의 제목, 설명, 사용할 파일 위치, 스타일 (CSS)같은
웹페이지의 보이지 않는 정보를 작성.
<body></body> : 눈에 보이는 구조를 나타내는 범위
사용자 화면을 통해 보여지는로고,헤더,메뉴 등 웹페이지의 보여지는 구조를 작성하는 범위
이미지 가운데 정렬
display: block;
margin-left: auto;
margin-right: auto;텍스트 가운데 정렬
text-align: center;
CSS
CSS의 기본 속성
1.CSS 기본속성
.box{
margin : 20px;
padding : 30px;
border : 1px solid black;
border-radius : 5px;
line-heigth : 1.15;
} margin은 바깥여백,
padding은 안쪽여백,
border는 테두리(차례로 두께,선의 종류, 색상)
border-radius는 테두리 둥글게 처리.
line-heigth는 기본 행간 높이
block
.box{ display: block; }
모든 div,p,h1,li 등은 display:block속성을 주지않아도 기본적으로 내장되어있다.
그래서 p태그나 div태그를 사용하면 한 행을 전부 차지하게 된다.
이게 싫다면 display 속성을 다른 것으로 부여해주면 된다.
.box{ display : inline, inline-block, flex }
inherit
일부스타일은 inherit 된다.
font-size,color,fone-family,text-align 이런 속성들은
부모 태그에 쥐어주면 거기 안에 있던 태그들 까지 전부 상속 됩니다.
영어로 inherit된다고 한다.
안에 글자들이나 태그들이 많을 경우 전부 font-size를 작성 안해도
부모태그에 한번에 작성하고 끝낼 수 있어 편리하다.
주로 글자와 관련된 스타일들이 inherit된다.
2.float, inline-bolck
float
<div>
<div class="left-box"></div>
<div class="rigth-box"></div>
<div class="last-box"></div>
</div> .left-box { width: 100px; height: 100px; background-color: aqua; float: left; }
.rigth-box { width: 100px; height: 100px; background-color: blue; float: left; }
.last-box { width: 100px height: 100px background-color: pink; }
-위의 코드는 박스 두개를 만들어 각각 왼쪽으로 정렬 시킨다.
-하지만 float를 쓰면 요소를 붕 띄우다보니 그 다음에 오는 HTML요소들이 제자리를 찾지 못한다.
그럴때는 clear 속성을 써주면 된다.
.last-box { width: 100px height: 100px background-color: pink; clear: both; }
clear속성을 사용하면 float 다음에 오는 박스들이 제자리를 찾게된다.
float썼으면 항상 넣으면 된다
inline-block
<div>
<div class="left-box"></div>
<div class="rigth-box"></div>
</div>
.left-box { width: 100px height: 100px display : inline-block; }
.rigth-box { width: 100px height: 100px display : inline-block; }
-위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드이다.
display 속성만 lnline-block으로 조정하면 가로로 배치가 가능하다.
간편하지만 <태그> 사이에 스페이스바 공백이 있다면 그대로 보여주기 때문에
가로로 정렬하려면 태그 사이의 공백도 제거 해줘야하는 단점이 있다.
3.셀렉터
HTML 태그에 클래스 두개 이상 붙이기
<div class="container text-center"> </div>
-띄어쓰기를 한 다음 원하는 class를 집어넣으면 된다.
셀렉터 사용법 1. 공백
.navbar il { display: inline-block; }
-위 처럼 공백을 이용해 안에있는 li태그인 모든 자손을 선택 할 수 있다.
셀렉터 사용법 2. 꺽쇠괄호 >
.navbar>il { display: inline-block; }
-기호를 이용해 inline-block 바로 밑에있는 자식만 선택할 수 있다.
4.배경관련 CSS 속성
간단한 배경 속성
.main-background{
background-image : url(../img/사진주소);
background-size: cover;
background-repeat : no-repeat;
background-position : center;
background-attachment : fixed;
}-MDN에 검색해보도록 !!
5.position
position을 사용하면 요소의 상하좌우 위치를 변경 할수 있다.
position 속성은 좌표속성을 적용한 기준점이 여기에요~! 라고 지정해주는 역할이다.
.box{
position : static; /* 기준이 없다 (좌표적용 불가)*/
position : relative; /* 기준이 내 원래 위치*/
position : absolute; /* 가준이 내 부모 태그*/
position : fixed; /*기준이 브라우저 창*/
}
position:absolute 를 적용한 요소 가운데 정렬
.box{
position:absolute;
left:0;
rigth:0;
margin-left: auto;
margin-rigth: auto;
wigth: 적절히
}6.input
form은 form태그로 만들어 낸다.
input은 셀프 클로스드 태그이다. ->
<form>
<input />
</form>
input에 넣는 속성들
<input placeholder="어쩌구" value="어쩌구" name="어쩌구" />
placeholder는 배결글자,
value는 미리 입력된 값
name은 서버 기능 개발에 필요한 인풋의 이름을 설정 가능하다.
전송버튼
<button type="submit">제출</button>
<input type="submit">전송버튼을 만드는 방법은 두가지가 있는데
둘중 하나를 쓰면 된다.
7.table
기본적인 table HTML 구성
<table>
<thead></thead>
<tbody>
<tr>
<td>내용</td>
<td>내용</td>
</tr>
</tbody>
</table>- table 태그 내에 tr은 row(행),td는 colomn(열)을 의미한다.
- tbody,thead는 그냥 헤드부분 영역구분을 위해 사용하며,대신 태그를 사용 하면 기본적으로 제목 처럼 굵게 처리된다.
- table은 기본적으로 틈이 존재하는데 없애려면
border-collapse:collapse
를 이용하면 된다.
테이블 셀 내에서 상하정렬 할 땐 vertical-align
td, th { vertical-align : middle,top,bottom }
- 글씨간의 세로정렬할 때 사용가능
- inline,inline-bolck요소 간의 세로정렬 할때 사용가능
8.Pseudo 셀렉터
상태에 따라서 스타일을 줄 수 있는 :Pseudo-class 셀렉터
.btn : hover { background : red; /* 마우스를 올려 놓았을 때 */}
.btn : focus { background : red; /* 클릭 후 계속 포커스 상태 일 때 */}
.btn : active { background : red; /* 클릭 중 일 때 */}
hover,focus,active 순으로 순서대로 선언해야 잘 동작한다.
:: pseudo-element 셀렉터
.class::first-latter { /* 첫 글자만 스타일을 줄 수 있다.*/}
.class::first-line{ /* 첫 줄만 스타일을 줄 수 있다.*/}
.class::After{ /* 내부의 맨 마지막 부분에 특정 글자같은걸 추가할 수 있다.*/}
.class::Before { /* 내부의 맨 앞 부분에 특정 글자같은걸 추가할 수 있다.*/}
내부의 일부분만 스타일줄 때 사용.
pseudo-element를 선택하려면 콜론 2개 :: 를 사용하면 된다.
9.Flex
가로배치 하는 방법
박스들을 감싸는 부모요소에 display: flex를 사용하면 된다.
그러면 박스들이 기본적으로 가로정렬로 배치된다.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.flex-container{
display: flex;
} flex 세부속성
.flex-container{
display: flex;
justify-content: center; /*좌우정렬*/
align-items: center; /*상하정렬*/
flex-direction: column; /*세로정렬*/
flex-wrap: wrap /* 폭이 넘치는 요소 wrap 처리*/
}
소중한 정보 잘 봤습니다!