HTML
Hypertext Markup Language(하이퍼텍스트 마크업 언어)의 줄임말로, 웹페이지의 기본적인 형태를 만드는 정적 언어이다.
CSS
HTML 구성요소들이 표시되는 방법을 개선하는 데 주로 사용되는 스타일 시트(style sheet) 언어이다. CSS는 정적인(static) 프로그래밍 언어이기는 하지만, 웹사이트를 시각적인 표현을 담당한다.
Javascript
브라우저 자체에서 내장된 해석기능을 이용한 클라이언트 기반의 일종의 스크립트 언어이며, 웹의 동적 처리를 담당한다.
HTML 개념
웹페이지의 기본적인 형태를 만드는 코드이다.
예시: 글자, 버튼
html은 쉽고 직관적이기 때문에 쉽게 배울 수 있다.
!+Tab을 누르면 기본적인 html 코드가 생성된다.
<!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>
</head>
<body>
</body>
</html>괄호 안에 적힌 영어 단어를 태그라고 부른다.
html은 태그를 순서에 맞게 조합한 문서이다.
head: 웹사이트에 대한 정보, 외부 자료 참고 (CSS, JS)
body: 실제 화면의 내용
h1~h6: 글의 제목이나 강조를 해주는 태그.
<h1>H1</h1>p: 문단을 넣을 때 사용하는 태그.
<p>굉장히 긴 텍스트
</p>input: 입력창, 내용이 없기 때문에 닫는 태그가 불필요하다.
<input type="text">type은 속성을 의미한다.
<input type="text">style 속성으로 외형을 커스템할 수 있다. 디테일한 스타일링은 css에서 가능하다.
<input type="text" style="width:500px; height:100px; font-size:50px">button 태그는 버튼을 의미한다.
<button>버튼</button>button도 스타일링을 해보자.
<button sytle="width:250px; height:100px; font-size:50px;">버튼</button>아래와 같이 코드를 추가하면, 버튼이 가로로 추가된다.
<button>버튼</button>세로로 버튼을 추가하고 싶다면, div 태그를 사용한다. 여러 개의 태그를 구역으로 묶거나 나눌 때 사용하는 코드이다. 아래처럼 코드를 추가하면, 버튼이 세로로 추가된다.
<div>
<button>버튼</button>
</div>
<div>
<button>버튼2</button>
</div>p태그 안에서 줄바꿈을 해도 적용하지 않는다. 줄바꿈을 하기 위해서는
태그가 필요하다. strong 태그 안에 문장을 넣어주면 텍스트가 강조된다.
<p syle="font-size: 50px">
<strong>
안녕하세요.
</strong>
<br/>
반갑습니다.
</p>a 태그는 다른 웹사이트로 가는 링크를 걸어준다. 간단하게 href 속성에 원하는 링크를 넣어주면 된다.
<a href="https://www.google.com">구글로 이동</a>div 태그를 이용해서 페이지의 블록을 나눌 수도 있다. div 태그 안에 나눌 태그들을 모아넣고 전체 태그를 하나의 div 태그로 다시 묶는다. div 태그에 display:flex라는 스타일을 넣어주었다.
<div style="display: flex;">
<div>
</div>
<div>
</div>
</div>이미지 첨부는 img라는 태그가 담당한다. alt 속성은, 이미지 불러오기가 실패했을 때 alt text를 불러오게 된다.
<img src="이미지 링크" alt="youtube">ul과 ol 태그는 둘 다 리스팅에 사용된다. ul 태그안에 li 태그르 넣고 그 안에 내용을 넣으면 워드에서 사용하는 것과 비슷하게 리스팅이 된다. ol은 ul과는 다르게 자동으로 숫자 넘버링이 붙는다.
<ul style="font-size:25px;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol style="font-size:25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>table 태그는 표를 만들 때 사용된다. ul과 비슷하게 table 태그 안에 내용이 되는 태그들을 집어넣어야 한다. tr은 테이블의 한 행을 의미한다. 첫 행에는 th, 즉 테이블 헤더를 칸 수에 맞게 배치한다. 다음 tr안에는 td 태그로 테이블의 내용을 헤더칸에 맞게 배치한다. 마지막으로 caption 태그로 테이블의 이름을 정해준다.
<ul style="font-size:25px;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol style="font-size:25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>form 태그는 회원가입이나 로그인 같이 특정 정보들을 묶어서 하나의 폼으로 제출해야할 때 사용하는 태그이다. form 태그 안에 세 개의 인풋 태그를 넣는다.
input 태그의 type 속성은 이 입력창이 어떤 정보를 입력 받을지 결정한다. 순서대로 text, email, password를 넣는다. email 속성은 이메일 정규식에 맞춰야 하고, password 속성으로는 입력하는 정보가 보이지 않는다. form 태그 안에서는 보통 버튼을 넣게 되는데, 버튼의 type을 submit으로 지정한다. 어디로 제출될지는 javascript로 결정한다. date type input은 날짜를 선택하는 기능이 있다. checkbox type input은 체크박스이다.
<form>
<input type="text" style="font-size: 30px;">
<input type="email" style="font-size: 30px;">
<input type="password" style="font-size: 30px;">
<input type="date" style="font-size: 30px;"><br/>
<input type="checkbox" style="font-size: 30px;"><br/>
<div>
<button type="submit" style="font-size: 30px;">완료</button>
</div>
</form>select 태그는 항목 선택을 위한 태그이다. 여러 선택지 중에 하나를 고른다. ul 태그와 비슷하게 여러 개의 option 태그들을 감싸는 형태이다. select 태그는 name 속성으로 이름을 지정해주고, option 태그는 value로 전송 값을 지정해준다.
<select name="coffee">
<option value="1">아메리카노</option>
<option value="2">카페라떼</option>
<option value="3">아메리카노</option>
</select>div 태그
<div></div> 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰인다.
다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓰인다.
<div>content1</div>
<div>content2</div>
<html>
<body>
<div style="background-color:cyan">구역1</div>
<div style="width:100px; height:100px; background-color:#CF0">구역2</div>
</body>
</html>
span 태그
<span></span> 태그는 <div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰인다.
<div> 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있다.이 둘의 차이를 쉽게 설명하자면, <div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않다는 점이다.
<span>내용</span>
<html>
<body>
<span style="background-color:red">span1</span>
<span style="background-color:blue">span2</span>
<span style="background-color:green">span3</span>
</body>
</html>
p 태그
<p></p> 태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰인다.
<p>문단1</p>
<html>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>
new line<br>
third paragraph
</p>
</body>
</html>
img 태그
<img /> 태그는 이미지를 삽입하는 태그로, src 속성을 통해 이미지 경로를 지정한다.
이미지 파일이 src 속성에서 지정한 경로에 없을시, 이미지는 출력되지 않거나 엑스박스가 뜨게 된다.
속성
src: 이미지의 경로
width: 이미지 가로 크기
height: 이미지 세로 크기
<img src="my_profile.png" width="500" height="300">
<html>
<body>
<p>
이미지가 정상적으로 삽입 된 경우<br>
<img src="/images/attach/logo_black.png" width="245">
</p>
<p>
없는 이미지가 삽입 된 경우<br>
<img src="no_img.png" width="100" height="50">
</p>
</body>
</html>
form 태그
<form> 태그는 웹 페이지에서의 입력 양식을 의미한다.
텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 서버에 양식이 전달되어 정보를 처리하게 된다.
실제로 백엔드 코드와 함께 <form>을 사용하기 위해서는 다음 속성들이 사용된다.
- name: 폼의 이름
- action: 폼 데이터가 전송되는 백엔드 url
- method: 폼 전송 방식 (GET / POST)
- …
input 태그
<form> 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다.실제로 사용자가 양식을 입력하기 위한 태그는 <input> 태그 등이 사용된다.
type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정한다.
type
text: 일반 문자
password: 비밀번호
button: 버튼
submit: 양식 제출용 버튼
reset: 양식 초기화용 버튼
radio: 한개만 선택할 수 있는 컴포넌트
checkbox: 다수를 선택할 수 있는 컴포넌트
file: 파일 업로드
hidden: 사용자에게 보이지 않는 숨은 요소
등의 유형이 있으며, HTML5에는 더 다양한 종류의 <input> 종류가 생겼다.
<form>
<p>
<strong>아이디</strong>
<input type="text" name="name" value="아이디 입력">
</p>
<p>
<strong>비밀번호</strong>
<input type="password" name="password" value="비밀번호 입력">
</p>
<p>
<strong>성별</strong>
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F">여자
</p>
<p>
<strong>응시분야</strong>
<input type="checkbox" name="part" value="eng">영어
<input type="checkbox" name="part" value="math">수학
</p>
<p>
<input type="submit" value="제출">
</p>
</form>
select, option
<select> 및 <option>은 드롭다운 리스트를 만드는 태그이다.
<select>
<option value="ktx">KTX</option>
<option value="itx">ITX 새마을</option>
</select>
이 밖에
<label>
<textarea>
<button>
<optgroup>
<fieldset>
태그 등이 <form>에서 활용된다.
a 태그
<a></a> 태그는 하이퍼링크를 걸어주는 태그이다.
속성
- href: 클릭시 이동 할 링크
- target: 링크를 여는 방법
_self: 현재 페이지 (기본값)
_blank: 새 탭
_parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰인다.
_top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰인다.
프레임이름: 직접 프레임이름을 명시해서 사용할 수도 있다.
<a href="http://www.naver.com">Go NAVER</a><html>
<body>
<a href="http://www.naver.com">Go Naver</a><br>
<a href="http://google.co.kr" target="_blank">Go Google (new window)</a>
</body>
</html>출력 결과
Go NaverGo Google (new window)
id/class
태그에서 설정한 id나 class 속성에 따라 스타일을 지정한다.
참고: HTML 태그의 속성
id 에 줄 경우 아래처럼 #을 맨 앞에 붙여 사용하며, 원칙적으로 하나의 객체에만 적용할 수 있다.
#아이디{ 속성1:속성값; 속성2:속성값; }class에 줄 경우 아래처럼 .을 맨 앞에 붙여 사용하며, 여러 객체에 적용할 수 있다.
.클래스명{ 속성1:속성값; 속성2:속성값 }
#m_box{ width:500px; height:300px; }
.box{ background-color:blue; }<html>
<head>
<style>
#m_box{ background-color: #09C; width: 150px; height: 40px; }
.box{ width: 100px; height: 50px; border: 1px solid green }
</style>
</head>
<body>
<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div id="m_box">m_box 아이디</div>
</body>
</html>
font 속성은 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기 한다.
정확히 말하면 6개의 세부적인 글꼴 관련 속성을 font라는 하나의 속성에 한번에 쓸 수 있다는 소리이다.
우선 세부적인 글꼴 관련 속성을 보자.
| font-style | 이탤릭체 등의 글꼴의 스타일 지정 |
| font-weight | 글자 두께 |
| font-variant | 글꼴 변형 (소문자를 대문자로 바꾸는 등의) |
| font-size | 글자 크기 |
| line-height | 줄 간격 |
| font-family | 글꼴 (굴림, 돋움, …) |
font 속성은 다음과 같은 순서로 세부 속성을 한번에 기술한다.
font: font-style font-variant font-weight font-size/line-height font-familyfont-style
글꼴의 스타일로, 주로 이탤릭체(기울여 표시)를 설정하기 위해 사용한다.
normal: 기본
italic: 이탤릭체
font-weight
글꼴의 두께로, 미리 정의된 단어나 100 ~ 900 사이의 숫자를 통해 설정한다.
기본값은 normal 입니다.
100: lighter
200
300
400: normal
500
600
700: bold
800
900: bolder
font-size
글자 크기로,
태그의 size 속성과 효과가 같다.
(HTML5 부터 태그 사용은 권장되지 않으며, CSS를 사용해야 합니다)
px, px, em, 등의 단위와 small, big 등의 상수 크기를 사용할 수 있다.
(일반 웹 페이지에서는 px 사용)
font-family
글꼴 종류로,
태그의 face 속성과 효과가 같다.
쉼표(,)로 여러 글꼴을 등록 할 수 있는데, 이때 맨 앞에 있는 글꼴을 우선으로 적용시키며, 맨 앞에 있는 글꼴이 사용자의 컴퓨터에 없을 때 그 다음 글꼴을 사용하게 된다.
.box1 {
font-size: 20px;
font-family: 나눔고딕,NanumGothic,돋움,Dotum;
}
.box1 .title { font-weight: bold }
.ex1 { font: 15px NanumGothic, sans-serif }
.ex2 { font: italic bold 12px/30px Dotum, sans-serif }<html>
<head>
<style>
#text1 { font-size: 37px }
#text2 { font-size: 28px }
#text3 { font-size: 19px }
.bold { font-weight: bold }
.italic{ font-style: italic }
.jinji{ font-family: "궁서" }
#text4{ font: italic bold 20px serif; }
</style>
</head>
<body>
<div id="text1">37px</div>
<div id="text2">28px</div>
<div id="text3">19px</div>
<br>
<div class="bold">굵은 글씨</div>
<div class="italic">기울인 글</div>
<div class="jinji">진지한 글꼴</div>
<br>
<div id="text4">There's no books on my backpack</div>
</body>
</html>color
color 속성은 단어 뜻대로 색상, 정확히는 글자의 색상을 의미한다.
red, blue등 이미 정의된 색
#000, #FFFFFF 등의 16진수 색상 코드
rgb(255, 255, 255) 등의 rgb 색상
rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba 색상
color 속성은 위 목록등의 값을 사용할 수 있으며, 기본값은 inherit으로 부모의 색상을 가져온다.
#text1 { color: red; }
#text2 { color: #0A0; }
#text3 { color: rgb(0, 0, 150); }
#text4 { color: rgba(30, 150, 100, 0.5); }
<html>
<body>
<div style="color: red">text1</div>
<div style="color: #0A0">text2</div>
<div style="color: rgb(0, 0, 150)">text3</div>
<div style="color: rgba(0, 140, 170, 0.5)">text4</div>
</body>
</html>
width, height
width와 height 속성은 각각 가로 길이, 세로 길이를 의미한다.
값을 정의 할때는 “100px” 처럼 숫자 뒤에 단위를 표시하여 적는다.
(px는 픽셀 이라는 의미의며 ‘50%’ 처럼 ‘%’ 단위를 사용 할 수도 있다.)
<span> 태그등 inline 요소는 적용 되지 않는데, 이는 display 속성에서 다시한번 다룬다.
#box{ width: 100px; height: 60px }
<html>
<body>
<div style="width: 150px; height: 80px; background-color: #d2f4ff; border: 2px solid #09c;">
150x80
</div>
<div style="width: 60px; height: 200px; background-color: #fde6ff; border: 2px solid #90C;">
90x120
</div>
</body>
</html>
position
position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖는다.
static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.
absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있다.
relative: 원래 있던 위치를 기준으로 좌표를 지정한다.
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다.
inherit: 부모 태그의 속성값을 상속받는다.
좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용한다.
position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다.
#box1 { position:static }
#box2 { position:absolute }
#box3 { position:relative }
#box4 { position:fixed }
#box5 { position:inherit }<html>
<head>
<style>
.box-container{
width: 350px;
border: 2px solid #e91bf5;
}
.box-container div{
padding: 10px;
border: 1px solid green;
background-color: #e3ffe0;
}
#box1 { position: static; top: 20px; left: 30px; }
#box2 { position: relative; top: 20px; left: 30px; }
#box3 { position: absolute; top: 20px; right: 30px; }
#box4 { position: fixed; top: 20px; right: 30px; }
</style>
</head>
<body>
<div class="box-container">
<div id="box1">static 박스</div>
<div id="box2">relative 박스</div>
<div id="box3">absolute 박스</div>
<div id="box4">fixed 박스</div> <!-- '출력 결과' 란이 아닌, 전체 페이지에서 고정되어 보여짐 -->
</div>
</body>
</html>
absolute와 relative
relative 인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 된다. (없다면 전체 문서가 기준)
<html>
<head>
<style>
#box-container{ position: relative; height: 90px; margin-top: 40px; border: 2px solid red; }
#box-inner{ position: absolute; top: 30px; left: 20px; border: 2px solid blue; }
</style>
</head>
<body>
<div id="box-container">
컨테이너
<div id="box-inner">absolute 박스</div>
</div>
</body>
</html>
margin, padding
margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미한다.width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적는다.
margin과 padding는 border 을 경계로 나뉩니다.
방향
방향마다 여백을 다르게 설정할 수 있다.
margin: 20px 같은 표현은 상하좌우 모두 20px을 의미한다.
margin: 30px 10px은 상하 30px, 좌우 10px을 의미한다.
margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미한다.
margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미한다.
즉 방향의 위부터 시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서로 설정한다.
#box{ margin: 10px; padding: 20px }<html>
<head>
<style>
.box-container{
display: inline-block;
background-color: #d2f4ff;
border: 2px solid #09c;
margin: 5px 15px;
}
.box-container div{
width: 120px;
height: 80px;
background-color: #fde6ff;
border: 2px solid #90C;
font-size: 15px;
}
#box1{ margin: 10px; padding: 0; }
#box2{ margin: 5px 25px; padding: 0; }
#box3{ margin: 0; padding: 10px 30px 5px; }
#box4{ margin: 10px; padding: 10px 20px; }
#box5{ margin: 10px 30px 0 50px; padding: 30px 0 }
</style>
</head>
<body>
<div class="box-container">
<div id="box1">m: 10<br>p: 0</div>
</div>
<div class="box-container">
<div id="box2">m: 5 25<br>p: 0</div>
</div>
<div class="box-container">
<div id="box3">m: 0<br>p: 10 30 5</div>
</div>
<div class="box-container">
<div id="box4">m: 10<br>p: 10 20</div>
</div>
<div class="box-container">
<div id="box5">m: 10 30 0 50<br>p: 30 0</div>
</div>
</body>
</html>
'👩💻 Programming > Frontend' 카테고리의 다른 글
| [React] axios 활용 (0) | 2021.11.03 |
|---|---|
| React Native 앱 5주차 개발일지 (0) | 2021.07.29 |
| React Native 앱 4주차 개발일지 (0) | 2021.07.28 |
| React Native 앱 3주차 개발일지 (0) | 2021.07.27 |
| React Native 앱 2주차 개발일지 (0) | 2021.06.23 |
