SASS는 CSS를 만들어주는 언어로 Javascript처럼 특정 속성(ex. color, margin..)의 값(ex. #000, 3px...)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 도와주는 기능을 가졌다.
SASS는 Ruby언어로 만들어졌기에, 사용하기 위해서는 Ruby가 설치되어있어야한다. 아래 SASS 예제를 보면 더 쉽게 이해가 갈 것이다.(아래는 SASS 중 하나인 SCSS예제입니다. 자세한 설명은 이어서 하겠습니다.)
SASS를 유지하는 사람들은 조금더 CSS에 친숙한 처리기를 만들기 위해, Sassy CSS라는 SCSS를 내놓았씁니다. 이들은 거의 동일한 기능을 가지고 있다.SASS는 중괄호, 세미콜론 같은 기호를 없애기 위해, 들여쓰기에 의존하며 이는 간결한 문장으로 이어진다. 하지만 이는 실제 CSS 문법과는 그 차이를 두고 있다.SCSS는 주로 CSS 올려진 작은 추가사항이므로, CSS에 친숙한 사람이라면 알아보기가 더 쉽다.
아래는 SASS와 SCSS 각각의 장점이다.
SASS
SCSS
More concise
Easier to read
Doesn't complain about missing semi-colons.
More expressive
encourages proper nesting of rules
More modular code with @extend
Allow me to write better inline doc.
Existing CSS tools often work with SCSS
Integration with an existing SCSS codebase is much easier
style.css 안에서 태그를 해주면 html 태그 안에 <style>를 해주지 않아도 <link> 태그에서 css 파일을 불러와 반영해줄 수 있다.
<div class="box">박스</div>
<a href = "naver.com">네이버</a>
1. <div></div>는 태그라고 하고 항상 열림/닫힘 한 쌍이 있다.
2. class="box"은 속성이라고 함. 이 class 속성을 이용해서 나중에 css로 스타일링을 할 수 있음.
3. 합쳐서 "엘레먼트"라고 부름
<body>태그 관련텍스트 관련 태그들텍스트 관련 태그
미디어 관련 태그들
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
</head>
<body>
<!-- 미디어 관련 태그들 -->
<!-- 사진을 불러 올 때 쓰는 태그
src 는 소스의 줄임말이다. -->
<img src="이미지주소"/>
<!-- 비디오를 불러 올 때 쓰는 태그 -->
<video src="비디오주소" controls />
<!-- 링크 태그 -->
<a href="naver.com">네이버</a>
<!-- 새 창을 열어서 랑크 주소로 이동 -->
<a href="google.com" target="_blank">구글</a>
</body>
</html>
테이블 태그
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
</head>
<body>
<!-- 테이블 태그 -->
<table border="1">
<!-- 테이블의 칼럼 개수, 칼럼 이름 -->
<thead>
<!-- 칼럼 2개 생성 -->
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<!-- 표의 내용이 들어감 -->
<tbody>
<!-- 첫 줄 -->
<tr>
<td>고양이</td>
<td>6살</td>
</tr>
<!-- 두번째 줄 -->
<tr>
<td>물고기</td>
<td>1살</td>
</tr>
</tbody>
</table>
</body>
</html>
테이블 태그의 결과값
목록 태그들
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
</head>
<body>
<!-- 목록 태그들 -->
<!-- <ol>은 ordered list (순번을 붙여줌) -->
<ol>
<li>보비</li>
<li>쵸비</li>
<li>예쁘니</li>
</ol>
<!-- <ul> : unordered list / 앞에 점을 찍어주는 태그 -->
<ul>
<li>보비</li>
<li>쵸비</li>
<li>예쁘니</li>
</ul>
</body>
</html>
목록 태그의 결과 값
구역을 나누는 태그들
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
<style>
.top{
background: red;
height : 100px;
}
.mid{
background: blue;
height : 100px;
}
.bot{
background: green;
height : 100px;
}
</style>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<!-- <div> vs <span> -->
<div class ="top">상단</div>
<div class="mid">중단</div>
<div class="bot">하단</div>
</body>
</html>
구역을 나누는 태그의 결과값
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
<style>
.top{
background: green;
height : 100px;
}
.mid{
background: yellow;
height : 100px;
}
.bot{
background: red;
height : 100px;
}
.like{
background: green;
height : 100px;
}
.sub{
background: yellow;
height : 100px;
}
.comment{
background: red;
height : 100px;
}
</style>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<!-- <div> vs <span> -->
<!-- <div> -->
<div class ="top">상단</div>
<div class="mid">중단</div>
<div class="bot">하단</div>
<!-- <span> -->
<span class ="like">좋아요</div>
<span class="sub">구독</div>
<span class="comment">댓글</div>
<!-- <div>(block element)는 한 줄 전체 공간을 차지
<span>(inline element)은 자기 내용물 만큼의 공간만 차지 -->
</body>
</html>
<div> vs <span>의 결과값
인풋 태그
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
</head>
<body>
<!-- 인풋 태그들 -->
텍스트 : <input type="text" />
체크박스 : <input type="checkbox" />
라디오 : <input type="radio" />
색깔 : <input type="color" />
여러문장 : <textarea></textarea>
드랍다운 : <select name="name">
<option value="보비">보비</option>
<option value="보비">쵸비</option>
</select>
<br>
로그인 :
<form>
<input type="email" placeholder="이메일" />
<input type="password" placeholder="비밀번호" />
<button type="submit">로그인</button>
</form>
</body>
</html>
1. number
숫자만 입력이 가능한 입력폼
<input type="number" min="최소입력 숫자 제한" max="최대입력 숫자제한 ">
2. 캘랜더 형식
<input type="date" name="datev">
<input type="month">
<input type="week">
<input type="time">
3. 이메일 주소를 입력하게 하는 것
<input type="email">
4. 검색
<input type="search">
5.전화번호 입력
<input type="tel">
6.url 입력
<input type="url">
7.슬라이더가 생긴다
<input type="range" min="최소입력 숫자 제한" max="최대입력 숫자제한 ">
8.autocomplete
컴퓨터가 기억 하고있는 자료를 자동으로 불러온다.
<form action="" autocomplete="on"></form>
<input type="text" name="id" autocomplete="on">
8.placeholder
<input type="password" name="pw" placeholder="필수입력 내용">
9. autofocus
사이트 커서가 자동으로 입력창으로 가게 해주는 법
<input type="password" name="pw" placeholder="필수입력 내용" autofocus>
입력 값 체크
10. require
필수로 입력하게 하는 것
<input type="password" name="pw" required>
11. 패턴 pattern
<input type="password" name="pw" required pattern="[a-zA-Z].+[0-9]">
HTML: 웹브라우저 내의 문서를 표현할 수 있는 언어
1.HTML 구조
<html>
<head>
<title>웹브라우저 탭에 보여지는 제목</title>
</head>
<body>
웹브라우저 내부에 보여지는 내용
</body>
</html>
1-3. 표형태로 표현할 경우:<body>이 곳에다가 적는다.</body>
1-3-1.표
<table>
</table>
1-3-2.표내부에 한 줄 : <table>이곳에다가 적는다.</table>
<tr>
</tr>
1-3-3 한 줄의 한칸 : <tr>이곳 사이에 적는다.</tr>
제목표현
<th>제목</th>
데이터표현
<td>데이터</td>
<a></a> : 링크라고 알려주는 태그
리스트태그
1. ul:그룹핑
<ul>
2. li: 리스트 표현
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ul>
<ol>
3. ol :순서가 있는 그룹핑(숫자 1,2,3..)
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
구조 태그
1.최상위 태그
<html></html>
2.문서 자체를 꾸며주는 태그들(head 태그 안에 들어오는 것)
<title>탭의 제목을 보여준다.</title>
<mata charset = "UTF-8"></mata>
3.본문태그(body 태그 안에 들어오는 것)
h1 : 제목
<h1>큰제목</h1>
<h2>중간제목</h2>
4.
<Doctype>웹브라우저에게 이것은 어떠한 표준을 따르는 코드들을 알리는 태그</Doctype>
1.p태그
<p>단락을 나누는 태그 자동 한줄 띄어쓰기가 됨 </p>
2.<br>
강제로 줄바꿈
한 줄 띄어쓰려면 태그를 2번 써줘야한다.
3.img 이미지 태그
<img src = " " width = " " height = " " alt= "이미지가 깨졌을 경우 보여줄 텍스트 " title="마우스를 가져다 놨을 때 보이는 글자">
4.표
<td>테이블 테이터</td>
<tr>행 td를 묶어주는 것 </tr>
<table border="테두리">테이블을 만들어주는 태그</table>
<thead>테이블의 헤드</thead>
<th>제목</th>
<tbody>데이블 중간</tbody>
<tfoot>테이블 마지막</tfoot>
<td rowspan="세로행병합"></td>
<td colspan="가로열병합"></td>
5.form
<form>입력한 정보를 서버로 전송할 때 사용하는 것 </form>
<form action="입력된 값을 이 주소로 전송한다."></form>
6.입력박스(form태그로 감싸줌)
<p><input type="text" name="입력값에 이름을 붙여주는 것 " value="입력칸에 나오는 이름"></p>
<input type="password">
전송하는 버튼
<input type="submit">
7.여러줄을 입력받는 것(form태그로 감싸줌)
<textarea cols="글자 수" rows="줄 수"></textarea>
8.선택(form태그로 감싸줌)
<form>
<select>
<option value="선택할 것의 이름명">선택을 할 수 있는 것들 </option>
</select>
<input type="submit">
</form>
-다중선택(form태그로 감싸줌)
<form>
<select name="전송 이름 명" multiple>
<option value="선택할 것의 이름명">선택을 할 수 있는 것들 </option>
</select>
<input type="submit">
</form>
9. 라디오버튼(하나의 버튼만 누를 수 있는 버튼)(form태그로 감싸줌)
<input type="radio" name="라디오 버튼에서 name이 같으면 같은 것 중에 하나지만 고를 수 있다." value="값이름" checked>
checked는 체크를 끝낸 것
10.체크박스(다중 선택 버튼)(form태그로 감싸줌)
<input type="checkbox" name= "" value="값이름">
11. 자바스크립트에서 사용한다(form태그로 감싸줌)
<input type="button" value="버튼" onclick="">
12.초기화(form태그로 감싸줌)
<input type="reset">
13.hidden (form태그로 감싸줌)
웹페이지 주소에 값을 보여주지 않고 싶을 때 사용(아이디와 패스워드 등 )
<input type="hidden" name="hide" value="egoing">
14.label(form태그로 감싸줌)
<p>
id를 지정하면 label은 for다음의 이름의 id의 이름표가 되어 클릭하면 그 이름의 입력창으로가게된다.
<label for="id_txt">무언가의 이름표</label>
<input id="id_txt" type="text" name="id" value="id">
</p>
<p>
붉은색으로 쓰여진 글자를 클릭해도 체크박스가 클릭된다
<label>
<input type="checkbox" name="color" value="red">붉은색
</label>
</p>
15.method(form태그로 감싸줌)
post방식(예)) 비밀번호 아이디 주소줄에 값을 보여주고 싶지 않을 경우)
<form action="" method="POST"></form>
get방식(url전송 방식)
<form action="" method="GET"></form>
16.파일 업로드(form태그로 감싸줌)
서버 폴더에 해당 파일이 저장된다
이미지를 첨부할 경우 반드시 enctype="multipart/form-data을 써준다
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="profile">
<input type="submit">
</form>
mata 태그
<head>
어떤 방식으로 저장하는 지
<meta charset="UTF-8">
웹에서 표시되지 않지만 요약자료로 작용된다
<mata name="description" content="코딩자료">
웹페이지를 분류 할때 사용하는 키워드
<meta name="keywords" content="코딩">
<meta name="author" content="egoing">
이웹페이지는 30초 간격으로 리프레쉬됩니다
<meta http-equiv="refresh" content="30">
</head>
