Published
Edited
Jun 23, 2020
md`
(페이지 길이가 길어져서 새로 쓰는)
# # 03 주차 폼 관련 태그
---
`
html`
form, input, label 태그를 중심으로 다룹니다. <br>
추가적으로 fieldset과 legend 같은 태그도 있음을 알립니다 <br>
<br>
form 태그의 method 옵션의 기본값은 get입니다.<br> 정보를 입력받을 것이기 때문이죠 <br>
<form action="http://www.hannam.ac.kr/" method="get" target="_blank">
<input type="text" name="query" value="기본값">
<input type="submit" name="버튼" value="입력">
</form>
<br>
form 태그안에 input태그를 추가하여 사용합니다. 근데, <br> input 옵션으로 type을 지정해주어야 합니다. value는 기본 설정한 값입니다. <br>
type은 text는 입력창, submit은 제출 버튼입니다.
`
html`
강의 자료에 있는 input 요소를 똑같이 만들어봅시다 <br>
<form action="https://postman-echo.com/get" method="get" target="_blank">
<input type="text" name="query">
<input type="submit">
<input type="button" value="버튼">
<input type="reset">
<input type="hidden" value="secret">
<br> 제출 버튼 누르면 진짜로 제출됩니다.. :ㅁ
</form>
`
html`
fieldset은 영역을 하나의 블록으로 묶는 태그입니다. 여기에 legend 태그를 추가하여 fieldset 영역의 제목을 설정할 수 있습니다. <br>
<form>
<fieldset>
<legend>설문 조사</legend>
<p>Q1. 이번 한 학기에 잘 한 점 한 가지를 선택하시오.</p>
<label><input type="radio" name="question1" value="study">공부</label>
<label><input type="radio" name="question1" value="toeic">토익</label>
<label><input type="radio" name="question1" value="homework">과제</label>
<p>Q2. 다음 한 학기에 분발할 점 한 가지를 선택하시오.</p>
<label><input type="radio" name="question2" value="major">전공</label>
<label><input type="radio" name="question2" value="book">독서</label>
<label><input type="radio" name="question2" value="english">영어</label>
</fieldset>
<fieldset>
<legend>미래 계획</legend>
<p>취업에 필요할 것 같은 스펙을 모두 고르시오.</p>
<label><input type="checkbox" name="spec" value="ability">능력</label>
<label><input type="checkbox" name="spec" value="gongmo">공모전</label>
<label><input type="checkbox" name="spec" value="language">외국어</label>
<label><input type="checkbox" name="spec" value="score">학점</label>
</fieldset> <br>  
<label><input type="submit" name="sub"></label>
<label><input type="reset" value="초기화"></label>
</form>
<br>참고로 label 태그는 form 태그에 캡션을 다는 역할의 태그입니다
`
md`
# 이제 CSS로 넘어왔습니다!!!!!
css하다가 html 했던거 잊어버리는 일이 없기를..T.T
---
`
html`
style 태그를 이용하여 스타일을 적용하는 방법이 있습니다. <br>
<style>
#example01 {background:yellow; }
</style>
style 태그 내의 내용은 출력되지 않습니다.<br>
<div id="example01">
전진! <span>1사단 11연대</span> 구호입니다. <br>
<span>보라매</span> 288번 후보생!
</div><br>
#은 id의 값을 선택하는 선택자입니다. .은 class를 선택하는 선택자 입니다.
`
html`
외부 스타일 시트 입니다. link 요소로 연결할 것입니다.<br>
<link href="" rel="stylesheet">
<div>
<a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/link">MDN 페이지로 이동</a> 에 대하여 <br>
정리한 페이지에 나오는 예제의 스타일 시트를 적용해보아요오. -> 생략하였다.
<br><br>
code import로 불러와 볼 것입니다.<br>
<style>
@import url("");
</sytle>
<p>사실 잘 모르겠다. 외부 스타일 시트는 다른 방법보다 어렵다.</p>
`
html`
인라인 스타일은 외부 스타일보다 조금 더 익숙합니다. <br>
<div style="background:yellow"; }
배경색을 <span>노랑노랑</span>하게 설정해보았습니다. <br>
<span>안녕, 병아리! '<'</span>
</div>
`
html`
<style>
// * { color : salmon ;}
</style>
`
html`
<h4>선택자는 중요하다고 교수님께서 많이 강조하셨어요 ThAnK You ProfessoR!</h4>
<p>전체 선택자를 지정하려면 *을 사용합니답</p>
얼래리, 왜 h4는 * 선택자로 안 잡히는 거지...
`
html`
태그 선택자를 지정할 겁니다. <br>
위 내용의 h4의 글자를 변경해봅시다.
<style>
h4 { font-size : 30px; font-variant : small-caps; }
</style>
`
html`
아이엠그라운드 과일 이름 대.기.!
<div id="Apple" class="fruit sweet">apple</div>
<div id="grape" class="fruit sour">grape</div>
<div id="melon" class="fruit sweet melon">melon</div>
여기에 스타일을 지정해 줄겁니다. class 선택자는 .입니다. <br>
<style>
.fruit { font-size : 20pt; }
.sweet { background: lightpink }
.sour { background : orange }
.melon { color : green; }
</style>
클래스는 반드시 하나일 필요가 없습니다. :p<br>
`
html`
id 선택자fmf 지정해줍시다. id 선택자는 #입니댜. <br>
강의자료에 나와있는대로 해봅시다 ! 자동차를 세 대 준비합니다.
<div id="sonata" class="hyndai sedan">sonata</div>
<div id="ionic" class="hyndai hatchback">ionic</div>
<div id="kona" class="hyndai suv">kona</div>
`
html`
이제 스타일을 지정해줍니다
<style>
#sonata { height : 100px; background-size : 190px; background-image: url("http://gasnews.com/news/photo/201903/86451_53988_2637.jpg");}
#ionic {height : 100px; background-size : 180px; background-image: url("https://t1.daumcdn.net/cfile/tistory/99943D365CCAA0FC16");}
#kona { height: 120px; background-size: 180px;
background-image: url("https://t1.daumcdn.net/cfile/tistory/2374164359422CEE35");
}
</style><br>
<strong>이것으로 위 자동차 세 대의 사진이 추가되었습니다 빠바밤-</strong>
`
html`
이제 속성 선택자를 사용해보려고 합니다. 아 근데 방이 정말 덥네요. <br>공부 집중이.. T.T<br>
form태그로 검색창 하나 만들어 봅시다.<br>
<form>
<input type="text" name="search">
<input type="submit">
<span type="submit">type이 submit인 span태그 입니다.</span>
</form>
<br> 속성 선택자로 스타일을 지정해봅시다.
<style>
[type="submit"] {border: 1mm dotted blue; }
</style><br>
<div>
성공!!! 지정이 잘 되었네요! <br> type="submit"이라는 속성을 가진 모든 태그에 스타일이 적용되었슙니다.<br> 속성에 대한 정보는 대괄호에 입력하고, 스타일 값은 이전과 같이 중괄호에 입력해주면 됩니다.
</div>
<p> 참고로 모든 선택자에는 전체 선택자 *가 생략되어있었다네요..!</p>
`
md`
---
# 열심히 CSS를 복습하고 있다고 생각했는데 <br>이제부터가 시작이더라
---
`
html`
<p class="someclass">someclass라는 이름의 p태그입니다.</p>
p태그에 스타일을 지정할겁니다. 클래스 선택자를 이용해봅시다<br>
<style>
.someclass { font-size : 15pt; color : red;}
.someclass { font-size : 20pt; color : blue;
font-size : 4pt; color : orange;}
</style><br>
같은 클래스 또는 같은 스타일 옵션이 선언되면, <br>
가장 나중에 선언된 값이 적용이 됩니다<em>(어찌보면 당연한 것!)</em>
`
html`
아니 자바에서 보았던 '상속'의 특성이 여기서도 있다고?!<br>
네. 근데 상속이 되는 속성과 아닌 속성이 있네요:o <br>
<style>
//body { font-size : 6px; }
//* { font-size : 6px; }
body { background-image: url("https://t1.daumcdn.net/cfile/tistory/99943D365CCAA0FC16"); };
</style>
<br>와우 모두 적용이 되네요! 지속되면 공부하기 불편하니 주석으로 해둡시다.<br>
하지만, background-image같은 경우 상속이 되지 않는 것을 확인할 수 있슙니다.
`
html`
이제 inherit과 initial 속성값입니다. 이건 헷갈리지만 제가 잘 이해하고 있습죠.<br>
빨간색 테두리를 지닌 박스 하나를 만들어봅시다.<br>
<div style="color : red; border: solid;">
빨간 테두리 박스
<div style="color:initial; border:inherit;">
테두리를 상속받고 글자색은 기본값인 박스 추가
</div>
</div>
. 개인적으로 두 개가 헷갈리네요. initial은 기본값, inherit은 상속!!!!!!!
`
md`
# # 05 주차 내용입니다. 오늘 하루에 다 못 끝내겠네요
박스모델과 시맨틱 태크 내용을 복습해보아요옹이
---
`
html`
<div class="box1a">
box1a 모델입니다. 박스모델을 설명하기 위한
<span class="box1b">box1b</span> 예제로 쓰였네요.
</div>
아래에 스타일을 지정해 줄 겁니다.
<style>
.box1a {
margin:20mm;
padding:10mm;
border: dotted;
background: skyblue;
}
</style>
<br> 원래 skyblue가 산뜻한 색이어야 하는데 말이에요. 이제 span인 box1b에도 스타일을 지정해줍시다.
<style>
.box1b {
margin:10mm
padding: 5mm;
border : solid;
background: yellow;
}
</style>
이쁘게 잘 적용되었슙니댜 :)
`
html`
다음 예제는 훨씬 코드가 길어요. <br> 그래도 시험공부에 도움이 되니까 직.접. 입력합니다.
<div class="box2a">
box2a 모델의 최신형 박스입니다.
<span class="box2b"> 이번에도 span 태그를 사용합니다. 이거는 내용이 길어야 하는데, 교수님께서는 예제를 반복해서 적어 놓으신게 너무 신선해서 강의 듣는데 피식했지 말입니다. 이 외에도 '양식' 검색했더니 서양음식이 나왔던 강의영상도 정말 즐겁게 보았는데 말이죠. 허허.</span> 충분히 많이 길게 썼네요.
</div>
. 중간에 .은 박스 아래가 잘리지 않는 용도로 사용하셨더라구요. 이제 스타일 지정!
<style>
.box2a { border : dotted; background-color: skyblue;}
</style>
<br>파란 박스가 잘 적용되었으니 b 박스도 스타일을 입혀줍니다.
<style>
.box2b { display : block;
margin: 10mm;
padding: 5mm 20mm 10mm 40mm;
border: solid;
background-color : yellow;
}
</style><br><br>잘 적용되었습니다. 여기서 정리 한 번 하고 갑시다.
<br> 스타일에서 display: block은 인라인 요소를 블록 특성을 가질 수 있게 해줍니다. margin이나 padding은 상하좌우 각각 지정이 가능하고, 하나의 값만 입력하면 상하좌우에 모두 동일한 값이 적용됩니다.
`
html`
비슷한 예제가 하나 더 있네요. 이번엔 크기 지정을 살펴볼겁니다.
<div class="box3a">
box3a의 신상 컨테이너 박스입니다. 완전 신모델.
<span class="box3b">오늘만 포장 서비스</span>해줍니다.
</div>
스타일을 입혀봅세야.
<style>
.box3a {
width : 800px;
height: auto;
border: dotted;
background: skyblue;
}
</style><br> width와 height은 알 수 있고, auto를 값으로 설정할 수 있음을 알아둡니다.<br> 다른 박스도 스타일을 입혀주면 좋겠네요
<style>
.box3b {
display: block;
width : 50%;
height: auto;
border : solid;
background: yellow;
}
</style><br><br> 완벽하네요! 크기 값으로 auto뿐만 아니라 정확한 수치를 모르면 %로도 지정이 가능합니다.
`
md`
<h2>** 시맨틱 태그는 JSbin에 적합한 것 같다고 판단하여 넘어갑니다.<br> <hr> 시간절약!! <br>밤샘열공!!!!</h2>
---
글이 길어지고 있으니까 다음 노트북을 하나 만들까요?
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
