HTML/CSS 를 배우는 중이다.
HTML 태그들 (<태그명>으로 열어주고 </태그명>으로 닫아줘야 한다)
<div>_한 줄을 차지한다.
<span>_span 태그 안의 엘리먼트가 차지하는 만큼의 공간만 차지한다.
<input type="???">_text, password, checkbox, radio를 넣어준다.
radio를 사용할 때는 <input type="radio" name="option1"> 이런 식으로 name을 지정해 radio의 종류를 나눌 수 있다. (option1의 input radio가 4개면 4개중 하나를 고르는 라디오 생성)
text를 사용할 때는 [글자 <input type="text" placeholder="여기에 입력하세요">] 로 글자 + 텍스트 박스(안에 나타날 텍스트) 를 적어줄 수 있다.
password는 자동으로 입력하는 글자가 가려지는 텍스트 박스가 생성된다.
<textarea>_텍스트를 입력할 수 있는 박스가 생성된다.
<button>_클릭할 수 있는 버튼이 생성된다. <button>로그인</button> 라고 작성하면 로그인 글자가 새겨진 버튼이 나타난다.
<ul>_숫자가 정해지지 않고 점으로 나열되는 리스트
<ol>_숫자로 순서가 정해져 보여지는 리스트
<li>_<ul>과 <ol>의 내부 인자로 나열되는 텍스트. <ul>과 <ol> 없이 독립적으로도 사용 가능하다.
<img src="https://..........jpg">_이미지 파일 삽입 시 src 태그를 이용한다. 웹 상의 이미지는 주소 복사/붙여넣기로 사용 가능하고 컴퓨터 내의 이미지는 파일 경로를 입력해 사용 가능하다. 단 웹사이트에서 작동되게 하려면 웹 상에 이미지가 업로드되어 있어야 한다. /로 닫아주지 않아도 사용 가능.
<p>_문단을 지정할 때 쓰는 태그
<a href="https://naver.com" target="_black">하이퍼링크 텍스트</a>_하이퍼링크를 걸어주는 태그. target의 입력값으로 해당 하이퍼링크의 오픈 방법을 편집 가능하다. 중간에 들어간 "하이퍼링크 텍스트"는 표시될 글자.
HTML 작성 순서
<!doctype html>_문서 형식을 HTML로 지정해준다.
<html>_html의 시작점을 지정한다. 보통 <html lang="ko"> 로 메인으로 사용될 언어를 지정해 주는 것 같다.
<head>_<meta charset>과 <title>이 들어간다. <meta charset>은 사용될 언어의 유니코드를 지정해 준다.
<title>_HTML이 열렸을 때 탭 이름으로 나타날 텍스트를 적어 준다.
</title>
<style>_CSS로 HTML 내부의 엘리먼트의 스타일을 컨트롤한다. 직접적인 엘리먼트에도 적용 가능하고 id와 class를 적용해 일괄적으로도 사용 가능.
</style>
</head>
<body>_페이지의 본문을 작성한다.
<div>,<span>,<ol>,<ul>,<li>,<textarea>,<button> 등등 갖가지 태그..
</body>_본문을 마친다.
<script>_스크립트를 통제하는 언어로 코드를 짜서 넣어주기 좋은 지점이다. 중간 어디에 들어가도 상관은 없지만 <body> 태그가 끝난 후 넣어주면 웹페이지를 일단 다 로드시키고 로직을 작동하기 때문에 페이지가 로딩되는데 딜레이가 없다_중간에 넣어주면 코드 로직을 돌리느라 <script>태그 이후에 있는 <body>내용들은 로드가 늦어진다.
</html>_HTML 문서의 마지막을 지정한다.
유의사항
JS와 달리 요소를 입력할 때 큰 따옴표("")가 디폴트다. ''를 사용해도 크롬에서는 작동 가능하지만 단지 크롬이 알아서 ''를 ""로 변환시키기에 작동되는 것이다. HTML작성 시엔 ""를 사용해아 한다.
CSS
1. box-model
CSS 박스 모델엔 position, margin, border, padding, content가 있다. position에 따른 영향은 relative와 absolute로 position을 지정해 줄 때만 영향이 있다. 제일 큰 순서대로 margin, border, padding, content이다.
태그(ex. <div></div>)가 차지하는 공간을 content 라고 한다. 그 content의 시각적인 범위를 늘려주려면 padding 값을 추가해준다. border는 그 밖의 테두리이다. margin은 다른 태그와의 거리이다.
시각화한다면
다른 태그와의 거리를 나타내는 margin 밑에
content의 테두리 라인이 되는 border가 있고,
그 안에 padding값 만큼의 범위를 가진
content가 위치한다.
padding 과 border 는 width, height 에 포함되지 않는다.
기본적으로 태그의 width와 height에 값을 주면 content가 기준이 되기 때문에 (default = box-sizing : content-box)
content에 주어진 값에 padding과 border에 주어진 값들이 다 합쳐지게 된다.
그러한 상황을 방지하려면 태그의 <style>속성값을 box-sizing : border-box로 부여해 주어
content-box가 아닌 padding과 border가 수정된 만큼의 범위를 가지게 한다.
position_
static, relative, absolute, fixed 네 가지가 있다.
포지션이 겹치는 태그들은 나중에 나오는 태그가 위로 올라가지만, z-index라는 속성을 추가해 순서를 조정할 수 있다.
z-index의 기본값은 0이며, 수가 올라갈수록 우선순위가 높아진다. 제대로 된 공부를 하지는 않았기에 추후에 추가 서술해야지.
static_
태그에 따로 포지션을 지정해 주지 않으면 기본적으로 주어지는 포지션이며 왼쪽에서 오른쪽으로 쌓이고, 위에서 아래로 쌓인다.
relative_
태그의 위치를 살짝 조정해 주고 싶을 때 주어지는 포지션이다. relative 포지션이 주어지면
static 포지션이었을 때의 위치를 기준으로,
top, bottom, left, right 속성을 이용해 각각의 방향을 기준으로 태그 안쪽으로 이동하기 때문에
top : 5px; 이라고 작성한다면 기존 static 위치에서부터 top 방향에 5px의 여유 공간을 지정해 5px만큼 내려오게 된다.
absolute_
position !== static 인 부모 포지션을 기준으로 이동하는 특이한 녀석이다. 상위 태그 중 static 이외의 포지션을 가진 태그가 없다면 제일 상위 태그인 <body>를 기준으로 움직인다. absolute는 범위의 기준이 부모 포지션을 가진 태그가 되기 때문에 absolute 포지션을 가진 <div>태그는 한 줄을 다 차지하지 않는다.
fixed_
태그의 위치를 속성값으로 주어진 위치에 고정시켜 버린다. 스크롤을 내려도 움직이지 않고 그 자리에 그대로 있는 항목들이 이에 해당된다. fixed도 absolute와 마찬가지로 위치가 고정되기 때문에 fixed 포지션을 가진 <div>태그는 한 줄을 온전히 차지하지 않는다.
2. id, class
HTML의 태그들에게 id와 class를 부여하여 스타일을 컨트롤 할 수 있다.
id는 개별적으로 주어지며 class는 여러개의 태그에게 함께 부여할 수 있다(일괄적으로 컨트롤이 가능하다).
id의 호출 방법은 #id
class의 호출 방법은 .class
작성 양식은
<style>
#id {
color : lightgreen;
margin : 20px 0px 0px 0px;
text-align : center;
}
</style>이런 식으로 HTML <head> 태그 내부의 <style>태그 안쪽에 작성한다.
CSS 태그는 종류가 너무 많기에 차차 써야겠다..
margin의 값은 순서대로 위, 오른쪽, 아래, 왼쪽이다.
'코딩을 배울테야 > Pre Course' 카테고리의 다른 글
| 72일차_20201124 (0) | 2020.11.24 |
|---|---|
| 66일차_20201118 (0) | 2020.11.19 |
| 61일차_20201113 (0) | 2020.11.13 |
| 45일차_20201028 (0) | 2020.10.28 |
| 43일차_20201026 (0) | 2020.10.27 |
댓글