HTML, CSS
HTML: 뼈대 / CSS: 꾸미기 / Javascript: 움직임 구현
HTML은 <head>와<body>로 구성
- <head> : 페이지 속성정보 (meta, script, link, title ... ), 우리 눈에 안보이는 요소를 담을 때 사용(색상, 크기, 폰트 등)
- <body> : 페이지의 내용이 담긴다. 눈에 보이는 실체
HTML <body>에서 사용하는 태그들
*꼭 외워서 사용하지 않아도 구글링해서 찾아써도 된다. 하지만 많이 쓰이는 것들은 외워두면 좋다.
태그는 사용후 슬래시를 붙여 태그를 닫고 종료를 해줘야한다. (ex- <div>내용</div>)
<div> : division, 구역을 나누는 태그
<p> : 문단을 나누는 태그, 한 줄씩 띄어주는 효과이다.
<ul><li> : bullet point, 중요항목을 나열할 때 사용하는 태그, <ul>태그안에 <li>태그를 넣어 사용한다.
| 사용예시: <ul> <li> the first bullet point </li> <li> the second bullet point</li> </ul> |
결과예시: · the first bullet point · the second bullet point |
<h1>~<h6> : <h1>은 제목(문서의 제목 역할을 한다.), <h2>는 소제목, <h3>~<h6> 점점 글씨가 작아진다.
<span> : 특정 글자만 꾸미고 싶을 때 묶어주는 태그
<a> : anchor하이퍼링크를 넣을 때 사용하는 태그, <a href="url">에 원하는 url을 붙여 클릭하면 해당 url로 이동한다.
<hr> : 수평선, 구분선 태그, 줄을 넣을 때 사용
<img> : 이미지를 넣어 쓰는 태그, <img src="">에 원하는 이미지 주소를 넣으면 된다. / 종료태그없음
<button> : 버튼을 만드는 태그
<input> : 정보를 입력하는 태그, 태그안에 type과 value 등 여러가지를 넣어 다양하게 입력란을 생성한다. / 종료태그없음
<input>태그안에 정보 추가할 수 있다. >> value="" 입력태그의 초기값 설정, name="" 서버로 전달되는 이름
(예시: <input type="text" value="입력하세요" name="txt">)
<input type="text" /> : 일반적인 텍스트입력창
<input type="password" /> : 비밀번호입력창
<input type="radio" /> : radio버튼 생성
<input type="checkbox" /> : 체크박스 생성
<input type="file" /> : 파일입력 창
<input type="image" /> : 이미지를 전송버튼으로 생성
<input type="hidden" /> : 사용자에게는 노출되지 않고 서버로 전송
<input type="submit" /> : 서버로 제출 및 전송하는 버튼 생성
<input type="button" /> : 일반적인 버튼 생성하는 창
<textarea>: 여러줄 입력하는 창, 범위를 가지고 있다.
CSS는 <head></head>안에 <style></style>을 넣어서 사용한다.
css를 적용할 html 태그에 이름을 붙여주고 class="이름", <style>에서 .클래스이름{ } 안에 CSS를 넣어 사용한다.
자주 쓰이는 CSS
*꼭 외워서 사용하지 않아도 구글링해서 찾아써도 된다. 하지만 많이 쓰이는 것들은 외워두면 좋다.
CSS입력이 끝나면 ;(세미콜론)을 붙여준다.
배경관련CSS
background-color
background-image
background-size
background-position
| display: flex; flex-direction: column or row; justify-content: center; align-items: center; |
: 정렬할 때 사용
사이즈관련CSS
(px 또는 % 단위로 조정한다.)
width
height
border-radius : 모서리를 둥글게 조정
border : 테두리 넣어주기 (예시: border: 1px solid white;)
폰트CSS
font-size
font-weight
font-family
colortext-align : 텍스트를 정렬할 때 사용(left, right, center 등)
간격CSS (px단위로 조정하고, 양끝은 자동으로 맞출 때 auto를 사용한다.)
margin : 바깥여백 조정padding : 안쪽여백 조정
색상관련 CSS
transparent(투명)
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) :이미지 어둡게 하기, 적용할 이미지 앞에 넣어주면 된다.
마우스를 올렸을 때
경로이름:hover{ } : hover안에 마우스를 올렸을 때 변화되는 CSS 넣어주면 된다.
기타CSS
display: none : 처음부터 안보이게 할 때, 숨겨둔다.
'💻 개발블로그 > 웹개발' 카테고리의 다른 글
| 1주차(3) 웹개발 강의: 부트스트랩 (0) | 2021.12.16 |
|---|---|
| 1주차(2) 웹개발 강의: 구글웹폰트/주석달기/CSS파일분리 (0) | 2021.12.16 |
| Ajax 팬명록에 온도 적용하기 (0) | 2021.12.14 |
| jQuery 연습(2-5) (0) | 2021.12.14 |
| JQuery (0) | 2021.12.14 |