6. 영역 관련 태그
(요소를 확연하게 보기 위해 내부 스타일 부여)
<style>
div, span{ /*1px짜리 실선 검정색으로 만들어줌*/
/*div은 안에 자료가 없을 지라도 자리 차지 O, span은 X*/
border : 1px solid black;
width: 400px;
height: 400px;
}
#div1, #span1{/*id가 div1인 태그에 스타일을 부여함*/
background-color: purple;
color: aliceblue;
}
#div2, #span2{
background-color: gray;
color: aliceblue;
}
#div3, #span3{
background-color: orange;
color: aliceblue;
}
</style>1) 블럭 요소
: 한 줄 단위로 영역을 차지하는 요소
줄바꿈이 적용되어 이미 존재하는 요소 다음줄에 출력됨 (textarea, p, pre, h1~h6, ... "div")
2) 인라인 요소
: content 내용만큼만 영역을 차지하는 요소
줄바꿈이 적용되지 않아 옆으로 연이어져 출력
다음 줄로 넘기고자 할 때 <br>로 개행해야 함 (input, label, mark, s, img, ... "span")
- 태그들은 모두 의미가 있지만 div와 span은 의미가 없음
3) div태그와 span태그의 차이
(1) div 태그 : 블럭요소로 영역을 지정할 수 있는 태그 (한 줄 차지)
(2) span 태그 : 인라인 요소로 영역을 지정할 수 있는 태그 (content영역만 차지)
<h2>div태그와 span태그의 차이</h2>
<h3>div태그 : 블럭요소로 영역을 지정할 수 있는 태그(한 줄 차지)</h3>
<div id = "div1">첫 번째 영역</div><div id="div2">두 번째 영역</div><div id="div3">세 번째 영역</div>
<h3>span태그 : 인라인요소로 영역을 지정할 수 있는 태그(content영역만 차지)</h3>
<span id="span1">첫 번째 영역</span><span id="span2">두 번째 영역</span><span id="span3">세 번째영역</span>
4) div와 span태그의 차이
(1) div태그 : 전체를 감싸는 사각형 박스로 영역을 지정
(2) spant태그 : 밑줄 형태
<h2>div와 span의 영역 지정 방식</h2>
<h3>div태그 : 전체를 감싸는 사각형박스로 영역을 지정</h3>
<div>
오면 라이너 이네들은 별 밤을 무덤 어머니, 시와 비둘기, 버리었습니다. 겨울이 흙으로 않은 옥 봄이 내린 내 자랑처럼 것은 봅니다. 때 북간도에 이런 별이 내 그러나 가을로 까닭이요, 헤일 있습니다. 새워 아직 하나에 것은 못 많은 시와 헤일 있습니다. 잔디가 잠, 헤는 이런 북간도에 가난한 노새, 별들을 있습니다. 토끼, 그러나 써 내 노새, 별빛이 멀리 별들을 까닭입니다. 위에도 마리아 별을 비둘기, 많은 우는 봅니다. 새겨지는 말 헤일 별 이름과, 무덤 불러 듯합니다. 잔디가 가난한 남은 추억과 쉬이 하나에 지나가는 차 봅니다. 않은 파란 이런 노새, 동경과 아직 버리었습니다. 소녀들의 나는 내 별 봅니다.
</div>
<hr>
<span>오면 라이너 이네들은 별 밤을 무덤 어머니, 시와 비둘기, 버리었습니다. 겨울이 흙으로 않은 옥 봄이 내린 내 자랑처럼 것은 봅니다. 때 북간도에 이런 별이 내 그러나 가을로 까닭이요, 헤일 있습니다. 새워 아직 하나에 것은 못 많은 시와 헤일 있습니다. 잔디가 잠, 헤는 이런 북간도에 가난한 노새, 별들을 있습니다. 토끼, 그러나 써 내 노새, 별빛이 멀리 별들을 까닭입니다. 위에도 마리아 별을 비둘기, 많은 우는 봅니다. 새겨지는 말 헤일 별 이름과, 무덤 불러 듯합니다. 잔디가 가난한 남은 추억과 쉬이 하나에 지나가는 차 봅니다. 않은 파란 이런 노새, 동경과 아직 버리었습니다. 소녀들의 나는 내 별 봅니다.</span>
5) iframe 태그
: 현재 이 HTML문서에 다른 웹페이지를 포함시키는 태그, 보통 '소스코드복사'를 통해 입력
<iframe src="3_표관련태그.html" width="700" height="700" frameborder="0"></iframe>
<iframe width="788" height="443" src="https://www.youtube.com/embed/MDe-DQw1wtg" title="[SUB] 저 이사했어요! 새 집 첫 브이로그, 제주 여행, 보늬밤 조림 만들기" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
7. 입력 관련 태그
1) a태그를 이용한 하이퍼링크
<h1>하이퍼 링크 태그</h1>
<h3>a태그를 이용한 하이퍼링크</h3>
<a href="3_표관련태그.html">표관련태그</a>
<a href="0_test.html">테스트</a>
2) 인터넷이 연결된 상황이라면, 현재 서비스 되고 있는 웹페이지도 링크 가능
(1) target 속성 : _self / _blank
- _self : 기존의 창에서 연결됨, target속성을 생략 시 기본값
- _blank : 새 탭에서 열기
<h3>인터넷이 연결된 상황이라면 현재 서비스되고 있는 웹페이지도 링크 가능</h3>
<a href="https://n.news.naver.com/article/033/0000044745?cds=news_media_pc&type=editn">22.58㎝나 기운 첨성대, 진짜 천문대였을까[이기환의 Hi-story]</a>
<ul>
<li> <a href="http://www.naver.com" target="_blank">네이버로 이동</a></li>
<li> <a href="http://www.daum.net" target="_self">다음으로 이동</a></li>
<li> <a href="http://www.google.com">구글로 이동</a></li>
</ul>
3) 이미지를 클릭해서 웹페이지 링크연결하기
<h3>이미지를 클릭해서 웹페이지 링크 연결하기</h3>
<a href="http://www.iei.or.kr" target="_blank">
<img src="resources/image/kh_logo.jpg" alt="kh로고"> kh정보교육원으로 이동
</a>
4) 한 페이지 내에서 점프하는 앵커(a태그) 만들기
<h3 id="list">한 페이지 내에서 점프하는 앵커(a태그) 만들기</h3>
<ul>
<li><a href="#content1">본문내용1</a></li>
<li><a href="#content2">본문내용2</a></li>
<li><a href="#content3">본문내용3</a></li>
</ul>
<!-- h4#content1{본문내용1} -->
<h4 id="content1">본문내용1</h4>
<br><br>
<div>
든 같은 뭇 피가 그림자는 것이다.
있는 천지는 커다란 우리는 부패뿐이다.
아름답고 싹이 새가 뜨거운지라, 싶이 무엇이 일월과 것이다.
같으며, 석가는 두기 피가 따뜻한 뭇 황금시대다.
주며, 미묘한 대중을 인간에 있다.
아니한 얼음과 그들은 없으면, 속에서 있으랴?
관현악이며, 것은 유소년에게서 가는 풀이 몸이 착목한는 끝에 우리 아니다.
전인 이상 공자는 그것은 있다.
위하여 위하여, 같이 보이는 인생을 꽃이 웅대한 튼튼하며, 바로 힘있다.
현저하게 이성은 시들어 있다. 우는 가치를 천지는 대중을 밥을 이상의 있다.
</div>
<br><br><br><br><br><br>
<h4 id="content2">본문내용2</h4>
<br><br>
<div>
동산에는 소리다.이것은 시들어 사라지지 사랑의 아니다.
청춘 맺어, 것이 청춘은 끝에 하는 풀이 사랑의 가슴이 것이다.
부패를 천자만홍이 가는 가장 속잎나고, 수 얼마나 약동하다.
열락의 우리 날카로우나 때에, 자신과 발휘하기 피어나기 피다.
만물은 투명하되 미묘한 보는 끝에 보이는 두기 이상은 것이다.
충분히 돋고, 이것이야말로 이것을 역사를 때문이다.
뭇 온갖 위하여 장식하는 인생에 영락과 돋고, 노래하며 아름다우냐?
구하지 때에, 위하여, 거친 이것이다.
그들은 같으며, 살았으며, 돋고, 낙원을 얼음 황금시대를 것이다.
불어 갑 같으며, 긴지라 이것이다. 무엇을 일월과 원질이 그들은 수 생생하며, 것이다.
</div>
<br><br><br><br><br><br>
<h4 id="content3">본문내용3</h4>
<br><br>
<div>
청춘의 위하여 생의 밝은 우리 것이다.
인생의 뼈 심장의 커다란 찾아 뜨고, 이성은 사막이다.
보이는 구하지 생의 갑 그들은 이성은 아름다우냐?
피부가 바이며, 인생에 같이, 청춘 행복스럽고 품었기 뿐이다.
역사를 주는 따뜻한 인도하겠다는 힘차게 살 약동하다.
희망의 그들은 고행을 것이다.
풍부하게 피가 역사를 설산에서 되는 수 풀이 만천하의 이것이다.
노래하며 청춘 때에, 얼마나 사막이다. 두기 물방아 보는 사막이다.
</div>
<br><br><br><br><br><br>
<a href="#list">목록으로 돌아가기</a>CSS (Cascading Style Sheets)
1. 기본 선택자
HTML구조는 그대로 두고, style태그로 구조를 꾸미는 역할을 하는 표현언어
HTML과 마찬가지로 *웹 표준이며, CSS3버전까지 존재하고 보통 3버전을 사용함
*웹표준 : W3C(WWW Consortium)에서 지정
1) 선택자란?
- 특정 HTML요소를 선택하고자 할 때 사용하는 기능
- 해당 요소를 선택해서 그 곳에서만 원하는 'style'을 적용 가능
(1) 모든(전체) 선택자
- [표현법]
* {
스타일 속성 : 값;
스타일 속성 : 값;
}
=> 모든 요소들을 다 선택하고자 할 때 사용
(2) 태그선택자(태그명)
- [표현법]
태그명 {
스타일 속성 : 값;
스타일 속성 : 값;
...
}
=> 이 문서 내에 같은 태그들을 모두 선택할 때 사용
(3) 아이디 선택자(#아이디명)
- [표현법]
#아이디명 {
스타일 속성 : 값;
스타일 속성 : 값;
...
}
=> 이 문서 내에서 특정 HTML요소 하나만을 선택하고자 할 때 사용
단, 해당 요소에 id속성을 이용해서 고유한 아이디값이 부여되어있어야 함
같은 태그더라도 부분적으로 다르게 스타일 부여하고 싶을 때 사용하면 좋음
<ol>
<li id="id1">아이디선택자</li>
<li id="id2">아이디선택자</li>
<li id="id3">아이디선택자</li>
<li id="id4">아이디선택자</li>
</ol>- id, class : 모든 태그에 공통적으로 사용할 수 있는 속성
- id : 문서 내에 고유한 값으로 하나만을 작성 (중복금지)
- class : 별명을 지어주는 속성, 여러 개 작성 가능, 중복값을 작성 가능
(4) 클래스 선택자(.클래스명)
- [표현법]
.클래스명{
스타일 속성 : 값;
스타일 속성 : 값;
...
}
=> 이 문서 안에서 여러 개의 요소를 선택하고 싶을 떄
<ul>
<li class="class1">클래스선택자1</li>
<li class="test">클래스선택자2</li>
<li class="class1 test">클래스선택자3</li> <!--클래스 여러 개 작성 시 한 칸 띄운 후 쓴다-->
<li>클래스선택자4</li>
<li class="class1">클래스선택자5</li>
</ul>2. 기타선택자
1 ) 속성선택자
스타일을 부여하고자 하는 요소 내에 작성되어있는 속성을 이용해서 선택하는 방법
기본선택자 뒤에 []를 이용해서 속성과 속성값을 제시해서 선택하는 방법
[표현법]
선택자[속성=속성값]{
스타일 속성 : 값;
...
} => "일치"
선택자[속성~=속성값]{
스타일 속성 : 값;
...
} => "포함"(단어기준)
선택자[속성|=속성값]{
스타일 속성 : 값;
...
} => "시작"(단어기준, -로 구분)
선택자[속성^=속성값]{
스타일 속성 : 값;
...
} => "시작"(단어기준)
선택자[속성$=속성값]{
스타일 속성 : 값;
...
} => ""
<div class="div-class" name="name1">div1</div>
<div class="div-class" name="name2">div2</div>
<div class="div-class" name="name3 name1">div3</div>
<!-- 하나의 name에 두 개 이상의 값이 있다면 "포함"되어있는것, 일치하는 것은 X -->
<div class="class-div" name="name3">div4</div>/* div요소 중에서 name 속성 값이 name1과 "일치"하는 요소만 스타일을 부여하겠다. */
/* 단어기준 */
div[name=name1]{
background-color: lightpink;
}
/* div요소 중에서 name 속성 값에 name1이 "포함"되어 있는 요소만 스타일을 부여하겠다. */
/* 단어기준 */
div[name~=name1]{
background: orange;
} /* background안에 색깔이 포함되어 있기 때문에 생략하고 색깔을 입력해줘도 됨 */
/* div요소 중에서 class속성값에 i(키워드)가 "포함"되어있는 요소만 스타일을 부여하겠다. */
/* 키워드기준 */
div[class*=i]{
color: teal;
background-color: antiquewhite;
}
/* div요소 중에서 class속성값이 div로 "시작"하는 요소만 스타일을 부여하겠다. */
/* 단어기준 */
div[class|=div]{
color: springgreen;
}
/* div요소 중에서 name속성값이 name3으로 "시작"하는 요소만 스타일을 부여하겠다. */
/* 키워드 기준 */
div[name^=name3]{
background-color: sienna;
}
/* div요소 중에서 class속성값이 ss로 "끝"나는 요소만 스타일을 부여하겠다. */
/* 키워드 기준 */
div[class$=ss]{
background-color: darkorchid;
}
/* 활용 */
/* class속성값이 div-class인 요소들 중에서도 name 속성값이 name3이 "포함"되어있는 요소 */
.div-class[name~=name3]{
color: salmon;
}
2) 자손(자식)선택자 후손선택자
자손 : 바로 하위요소들
후손 : 하위 요소들 전부
[표현법]
- 자손선택자(>)
a > b{
스타일 속성 : 값;
...
}
- 후손선택자( )
a b {
스타일 속성 : 값;
...
}
<div id="test1">
<h4>div의 자손이면서 후손</h4>
<h4>div의 자손이면서 후손</h4>
<ul> div의 자손이면서 후손
<li>ul의 자손이면서 div의 후손</li>
<li>ul의 자손이면서 div의 후손</li>
</ul>
</div>/* - 자손선택자 a > b
: a요소의 자손들 중에서 b요소들만 선택 */
/* id속성 값이 test1인 요소의 자손들 중에서 h4태그인 자손들 */
#test1 > h4 {
background-color:aquamarine;
}
/* id속성값이 test1인 요소의 자손들 중에서 ul태그인 요소의 자손들 중에서 li태그 */
#test1 > ul > li{
background-color: peru;
}
/* 후손선택자 ab : a요소의 후손(모든하위요소)들 중에서 b요소들만 선택 */
#test1 li{
color:seagreen;
background-color: cornflowerblue; /*우선순위가 밀려서 적용X*/
}
/* 후손순위선택자가 자손순위선택자보다 높다 */
3) 동위(같은 레벨) 선택자
동위관계(같은 레벨)에 있는 뒤에 위치한 특정요소를 선택할 때 사용
[표현법]
- a요소 뒤에있는 b요소 단 하나만을 선택자
a+b {
스타일 속성 : 값;
...
}
- a요소 뒤에 있는 b요소들을 모두 다 선택
a~b{
스타일 속성 : 값;
...
}
<div id="test2">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<ul>ul요소</ul>
<div>div요소</div>/* a + b : a요소 뒤에 있는 b요소 단 하나만을 선택 */
/* id가 test2인 요소 뒤에 있는 div요소 하나만 선택 */
#test2 + div{
background-color: rosybrown;
}
/* id가 test2인 요소 뒤에 있는 ul요소 하나만 선택 */
#test2 + ul{
background-color: olivedrab; /*바로 뒤의 요소가 아니기 때문에 반영X*/
}
/* a ~ b : a요소 뒤에있는 모든 b요소들을 선택 */
/* id가 test2인 요소 뒤에 있는 모든 div요소를 선택 */
#test2 ~ div{
/* background-color: rebeccapurple;*/
}
/* id가 test2인 요소 뒤에 있는 모든 ul요소를 선택 */
#test2 ~ ul{
background-color: deeppink;
}
4) 반응선택자
사용자의 움직임에 따라 선택이 되거나 안되는 선택자
[표현법]
- 해당 요소를 클릭했을 경우 스타일을 부여하고자
선택자 : active {
스타일 속성 : 값;
...
}
- 해당 요소에 마우스가 올라가는 순간 스타일 부여
선택자 : hover{
스타일 속성 : 값;
...
}
<div id="active-test" class="area">active 테스트</div>
<br>
<div id="hover-test" class="area">hover 테스트</div>.area{
width : 100px;
height: 100px;
background-color: aquamarine;
}
#active-test:active{
color:coral;
background-color: rebeccapurple;
cursor: pointer;
}
#hover-test:hover{
color: azure;
background-color: brown;
cursor: pointer;
}
5) 상태 선택자
요소의 상태에 따라서 선택되는 선택자
<선택할 수 있는 상태의 종류>
1. checked상태
2. focus상태
3. enavled상태
4. disabled상태
[표현법]
1) checked상태의 요소들
선택자 : checked{
스타일 속성 : 값;
....
}
<input type="checkbox" id="banana" ><label for="banana">바나나</label>
<input type="checkbox" id="watermelon"><label for="watermelon">수박</label>
<input type="checkbox" id="mango"><label for="mango">망고</label>input[type=checkbox]:checked, label{
width: 20px;
height: 20px;
/* font-size: 20px; */
}
/* 체크박스에 선택이 될 때 스타일 반영 */
/* 체크박스가 체크 될 때 글씨크기도 20px로 변경하고 싶다면?
labal요소*/
input[type=checkbox]:checked + label{
font-size: 20px;
}
2) focus가 맞춰진 input요소 선택
선택자 : focus {
스타일 속성 : 값;
....
}
아이디 : <input type="text" name="userId" placeholder="아이디를 입력하세요." disabled>
<br>
비밀번호 : <input type="password" name="userPwd">
<br>input[name^=user]:focus{
background-color: cornflowerblue;
}
3) enabled : 활성화된 상태
선택자 : enabled {
스타일 속성 : 값;
....
}
4) disavled : 비활성화되어있는 상태
선택자 : disabled {
스타일 속성 : 값;
....
}
button:enabled{
background-color: indianred;
}
button:disabled{
background-color: antiquewhite;
}<button>클릭가능</button>
<button disabled>클릭불가능</button>
2-2. CSS 스타일 부여 방식
(1) 인라인 스타일 방식 : 스타일을 부여하고자 하는 요소 내에 style속성을 이용해 직접 기입하는 방식
<h1 style="color:greenyellow; background-color:yellowgreen">CSS 기본 선택자</h1>
(2) 내부 스타일 방식 : 현재 이 html문서에 적용시키고자 하는 스타일 정보들을 <head>영역에 <style>태그
내에 기입하는 방식 => 외부스타일방식은 시간이 오래걸리기에 수업시간에 사용할 예정
: style태그 사용 <style></style> -> css영역이라고 함
● 모든(전체)선택자
- 내부 스타일 방식보다 인라인스타일 방식이 우선순위가 더 높음.
* {color:cadetblue; /*color : Content 색상 변경*/}● 태그선택자(태그명)
- 여러 개를 같은 스타일을 적용하고 싶을땐, ','로 구분해도 됨.
p, pre {
color: brown;
}● 아이디 선택자(#아이디명)
#id3{
color: blueviolet;
background-color: aquamarine;
}● 클래스선택자(.클래스명)
.class1{
color : salmon
}
.test{
font-size: 30px;
}
- 외부 스타일 방식 : 스타일 정보만을 따로 관리하는 .css 외부 문서를 만들고 <link>태그를 통해 연결
시켜주는 방식 => 보통 유지보수로 인해 많이 사용
3. 선택자 우선순위
- 기본적으로 css는 스타일이 위에서 아래로 순서 적용
- 동일한 요소를 다양한 선택자로 css가 부여된 경우 우선순위에 따라 적용
<선택자 우선순위>
1. !lmportant
2. 인라인 스타일 방식
3. 아이디 선택자
4. 클래스 선택자
5. 태그 선택자
<style>
h1{
background-color: pink;
color:yellow;
}
h1{
color:palegreen;
}/* 같은 스타일 속성에 대해 덮어씌워짐 */
#id1{
background-color: lightgreen;
}
.class1{ /*클래스 선택자보다 아이디선택자의 우선순위가 더 높다.*/
background-color: goldenrod;
color: darkcyan;
}
div{
/* 우선순위가 낮더라도 !important 키워드를 붙이면 우선적으로 적용 */
background-color: rosybrown !important;
color: darkgoldenrod;
width: 200px;
height: 200px; /*우선순위가 낮더라도 위에서 속성을 지정하지 않은 스타일은 적용이 가능*/
}
h1{
color: tomato !important;
background-color:beige;
}
.class2{
background-color: aquamarine;
}
#id2{
color: violet;
}
4. 글꼴 관련 스타일
1) font-family
글꼴을 지정할 때 사용
[표현법]
선택자 {
font-family : 바꾸고자하는 글꼴명;
}
<p id="ff1">글꼴 테스트1</p>
<p id="ff2">글꼴 테스트2</p>
<p id="ff3">글꼴 테스트3</p>/* font-family 스타일 적용 */
#ff1{font-family: 궁서체;}
#ff2{font-family: 고딕체;} /*기본글꼴*/
#ff3{font-family: kh체, 궁서체;} /*앞에 글씨체가 없으면 뒤에 글꼴이 적용*/
1-1) 외부 웹폰트를 사용하는 법
웹 폰트 제공 사이트 : 구글웹폰트 http://fonts.google.com
<p id="web-font">ABCDEFGHIJKLMNOP</p><--head요소에 입력-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">/* 웹 글꼴 테스트 */
#web-font{font-family: 'Quicksand', sans-serif;}
2) font-size
글꼴의 크기를 변경할 때 사용
[표현법]
선택자 {
font-size : 크기에 해당하는 숫자 (단위 : px/em/%)
}
<ul>
<li id="fs1">px 테스트</li>
<li id="fs2">em 테스트</li>
<li id="fs3">% 테스트</li>
</ul>/* font-size 적용*/
#fs1{font-size: 30px;}
#fs2{font-size: 1.5em;}
#fs3{font-size: 200%;}
3) font-weight
글꼴의 굵기를 표현할 때 사용
[표현법]
선택자 {
font-weight : normal, bold, bolder, lighter, 100~900;
}
<ul>
<li style="font-weight: normal ;">원래 굵기</li>
<li id="fw1">굵은 글꼴로 변경</li>
<li id="fw2">원래굵기보다 더 굵게 만들어줌</li>
<li id="fw3">원래굵기보다 더 가늘게 만들어줌</li>
</ul>/* font-weight적용 */
#fw1{font-weight: bold;}
/* 굵은 "글꼴"로 변경 */
#fw2{font-weight: bolder;}
#fw3{font-weight: lighter;}
4) font-style
텍스트 문구를 기울이고자 할 때 사용
[표현법]
선택자 {
font-style : normal/italic/oblique;
}
=> italic : 기울임 글꼴 , oblique : 원래 글자를 기울임
<ul>
<li style="font-style:italic;">italic</li>
<li style="font-style: oblique;">oblique</li>
</ul>
5. 텍스트 관련 스타일
1) color : 텍스트 컬러변경
[표현법]
선택자 {
color : 값;
}
<style>
#c{
color: #FF8787; /*16진수*/
color: rgb(rgb(241, 172, 172)); /*RGB 0~255*/
color: rgba(rgb(185, 143, 143)); /*숫자가 작을 수록 투명*/
color: hsl(200, 50%, 50%); /*색상값(0~360), 채도(%), 명도(%)*/
color: hsla(200,43%, 45%, 0.542);
}
</style>
2) text-decoration
텍스트에 줄을 긋거나 지울 때 사용
[표현법]
선택자{
text-decoration:none/underline/overline/line-through;
}
- underline : 텍스트 아래에 선긋기
- overline : 텍스트 위에 선긋기
- line-through : 텍스트 중간에 선긋기
<a href="http://www.naver.com" style="text-decoration:none; color:black">네이버</a>
<!-- a태그는 기본적으로 underline 색상도 보라색-->/* 텍스트 줄긋기 */
#td1{text-decoration: underline;}
#td2{text-decoration: overline;}
#td3{text-decoration: line-through;}
3) text-align
텍스트를 정렬할 때 사용
[표현법]
선택자 {
text-align : left/right/center/justfy;
}
<h4>
<p style="text-align: justify;">
두손을 몸이 뭇 방황하여도, 간에 방황하였으며, 봄날의 얼마나 않는 황금시대다. 무엇을 튼튼하며, 같이 뿐이다. 보배를 속잎나고, 앞이 시들어 청춘 아름다우냐? 유소년에게서 기쁘며, 길지 찬미를 이 이상 있으랴? 바이며, 시들어 실현에 놀이 간에 몸이 못할 사막이다. 방지하는 불러 청춘이 보이는 속잎나고, 밥을 수 영원히 사막이다. 대중을 싹이 실로 사막이다. 기쁘며, 가치를 그들은 거친 피는 영원히 방황하였으며, 힘있다. 눈이 그들은 생생하며, 사막이다.
</p>
</h4>
<h4>
<p style="text-align: left;">
두손을 몸이 뭇 방황하여도, 간에 방황하였으며, 봄날의 얼마나 않는 황금시대다. 무엇을 튼튼하며, 같이 뿐이다. 보배를 속잎나고, 앞이 시들어 청춘 아름다우냐? 유소년에게서 기쁘며, 길지 찬미를 이 이상 있으랴? 바이며, 시들어 실현에 놀이 간에 몸이 못할 사막이다. 방지하는 불러 청춘이 보이는 속잎나고, 밥을 수 영원히 사막이다. 대중을 싹이 실로 사막이다. 기쁘며, 가치를 그들은 거친 피는 영원히 방황하였으며, 힘있다. 눈이 그들은 생생하며, 사막이다.
</p>
</h4>
<h4>
<p style="text-align:center;">
두손을 몸이 뭇 방황하여도, 간에 방황하였으며, 봄날의 얼마나 않는 황금시대다. 무엇을 튼튼하며, 같이 뿐이다. 보배를 속잎나고, 앞이 시들어 청춘 아름다우냐? 유소년에게서 기쁘며, 길지 찬미를 이 이상 있으랴? 바이며, 시들어 실현에 놀이 간에 몸이 못할 사막이다. 방지하는 불러 청춘이 보이는 속잎나고, 밥을 수 영원히 사막이다. 대중을 싹이 실로 사막이다. 기쁘며, 가치를 그들은 거친 피는 영원히 방황하였으며, 힘있다. 눈이 그들은 생생하며, 사막이다.
</p>
</h4>
<h4>
<p style="text-align:right;">
두손을 몸이 뭇 방황하여도, 간에 방황하였으며, 봄날의 얼마나 않는 황금시대다. 무엇을 튼튼하며, 같이 뿐이다. 보배를 속잎나고, 앞이 시들어 청춘 아름다우냐? 유소년에게서 기쁘며, 길지 찬미를 이 이상 있으랴? 바이며, 시들어 실현에 놀이 간에 몸이 못할 사막이다. 방지하는 불러 청춘이 보이는 속잎나고, 밥을 수 영원히 사막이다. 대중을 싹이 실로 사막이다. 기쁘며, 가치를 그들은 거친 피는 영원히 방황하였으며, 힘있다. 눈이 그들은 생생하며, 사막이다.
</p>
</h4>
6. 목록 관련 스타일
1) list-style-type : 불릿기호를 변경할 때 사용
[표현법]
* 순서 없는 목록 (ul)
선택자 {
list-style-type : disc/circle/square/none;
}
* 순서 있는 목록 (ol)
선택자 {
list-style-type : decimal => 아라비아 숫자(십진수)
list-style-type : lower-alpha / upper-alpha => 알파벳
list-style-type : lower-roman / upper-roman => 로마 숫자
}
<h4>순서 없는 목록</h4>
<ul id="ul1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<h4>순서 있는 목록</h4>
<ol id="ol1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<u1 id="ul2">
<li>강남본원 1관</li>
<li>강남본원 2관</li>
<li>강남본원 3관</li>
<li>당산지원</li>
<li>종로지원</li>
</u1><style>
#ul1{
list-style-type: none;
}
#ol1{
list-style-type: lower-roman;
}
#ul2{
list-style-position: inside;
list-style-image: url("resources/image/iconsample.png");
}
</style>
7. 영역 관련 스타일
1) 여백 및 간격 관련 스타일
(1) 영역 구분
ㄱ. margin : 바깥쪽 여백
ㄴ. border : 테두리영역 -> 여기까지가 실제영역의 크기
ㄷ. padding : 내용물 영역이랑 테두리영역 사이의 거리(안쪽여백)
ㄹ. content : 실제 내용물이 들어있는 영역
실제 요소의 크기(영역) == content + padding + margin
ㄱ. padding
내용물 영역(content)와 테두리영역(border)사이의 거리(여백)을 조절하는 스타일 속성
<div class="test">기준div</div>
<div id="test1" class="test">컨텐츠영역</div>
<b>padding : 100px;</b>
<div id="test2" class="test">컨텐츠영역</div>
<b>padding-top : 50px, padding-left : 100px;</b>
<div id="test3" class="test">컨텐츠영역</div>
<b>padding : 50px 20px 10px 0px</b>.test{
background-color: antiquewhite;
width: 100px;
height: 100px;
/* content가 들어가는 영역 */
/* content+padding+border+margin */
border: 10px solid black;
}
#test1{
padding: 100px;
}
#test2{
padding-top: 50px;
padding-left: 100px;
}
#test3{
/* padding: 50px 20px 10px 0px; */
padding: 50px 20px; /*위 아래 오른쪽 왼쪽*/
}
ㄴ. margin
타 요소들 사이의 간격을 조정할 떄 사용
실제 영역엔 포함이 안 됨*********************
<div id="test4" class="test">컨텐츠 영역</div>
<b>
margin : 50px;
</b>
<div id="test5" class="test">컨텐츠 영역</div>
<b>
margin-top : 30px; margin-left : 100px;
</b>
<div id="test6" class="test">컨텐츠 영역</div>
<b>
margin : 50px 20px 10px 0px;
</b>/* margin */
#test4{
margin: 50px;
}
#test5{
margin: 30px;
margin-left: 100px;
}
#test6{
/* margin : 50px 20px 10px 0px; */
/* 요소를 부모요소 가운데 정렬, 화면크기가 변할 때에도 가운데 위치 */
/* margin-left: auto; */
/* margin-right: auto; */
/* top과 bottom은 적용 x */
/* margin-top: auto; */
/* margin-bottom: auto; */
margin : auto;
/* margin : auto; 화면 크기가 변해도 좌우 간격을 자동으로 가운데 맞춰줌 */
}
8. 테두리 관련 스타일
[표현법]
선택자 {
*테두리 스타일
border-위치-style : none/dotted/dashed/solid**/double/groove/ridge/inset/outset;
*테두리 두께
border-위치-width : 테두리두께 px;
*테두리 색상
border-위치-color : 테두리 색상;
* 테두리 모서리 둥글게
border-위치-radius : 숫자 px; =>위치 생략가능(사방이 다 동그랗게)
*박스에 그림자
box-shadow : 가로(x) 세로(y) 흐림정도 번짐정도 색상;
}
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
<div id="test6"></div>
<div id="test7"></div>
<div id="test8"></div>
<div id="test9"></div>
<div id="test10"></div>
<br><br><br>
<button id="btn">로그인</button>
<br><br><br><br>
<div id="ts">HTML</div><style>
div{
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
}
#test1{
border-style: dotted;
border-width: 10px;
border-color: tomato;
border-top-style: double;
border-right-color: burlywood;
border-bottom-width: 1px;
}
#test2{
/* 테두리의 두께, 스타일, 색상을 한 번에 지정 */
border : 10px dotted yellowgreen;
border-left-style : solid;
border-top: 5px dashed red ;
}
#test3{ /*12시 방향부터 시계 방향으로 적용*/
border-style : dashed double solid dotted;
}
#test4{
border-style: groove; /*패인액자느낌*/
border-width: 10px;
border-top-left-radius: 50px;
}
#test5{/*튀어나온 액자느낌*/
border-style: ridge;
border-width: 10px;
border-bottom-right-radius:30px ;
}
#test6{ /*들어간 액자*/
border-style: inset;
border-width: 10px;
}
#test7{/*나온액자*/
border-style: outset;
border-width: 10px;
}
#test8{
border-radius: 80px;
border-style: solid;
}
#test9{
border : solid;
box-shadow: 5px 5px 10px 5px grey;
}
#test10{
border: 2px solid orange;
}
#btn{
border : 2px dashed pink;
padding: 30px;
color: palevioletred;
background-color:rebeccapurple;
border-radius: 10px;
}
#btn:hover{
background-color: mediumvioletred;
cursor: pointer;
color: beige;
}
#ts{
font-size: 50px;
font-weight: 600;
color: white;
text-shadow: 0px 0px 4px gray,
0px -5px 4px yellow,
0px -10px 8px orange,
0px -15px 14px orangered,
0px -22px 19px red;
}
</style>
8. 배경 관련 스타일
1) background-color / background
배경색을 지정하고자 할 때 사용
[표현법]
선택자 {
background-color : 지정할 색 ;
}
<div id="div-bg">
보이는 이 때에, 청춘 수 끓는다. 행복스럽고 꾸며 그들을 트고, 이상의 같이, 부패뿐이다.
그들은 이상의 열락의 동산에는 약동하다. 있는 못하다 보배를 꽃이 얼음 우리의 가진 사막이다.
노래하며 열락의 돋고, 않는 청춘의 방지하는 커다란 평화스러운 사막이다. 그들의 얼마나 많이 이것이다.
그들의 작고 같으며, 못할 동력은 같이, 속잎나고, 인생에 얼마나 힘있다.
지혜는 싶이 같이, 목숨을 칼이다. 희망의 기쁘며, 우는 우리는 그러므로 품에 운다.
천지는 부패를 두손을 든 꽃이 용기가 것이다. 얼음 위하여 미인을 살았으며, 대한 칼이다.
꽃 그들은 아름답고 과실이 것이다.
그들은 날카로우나 사는가 가슴이 우리 같은 평화스러운 보는 아니다.
오아이스도 타오르고 이상의 목숨을 없으면, 두기 이것이다.
뼈 그들은 이것은 봄바람을 부패를 발휘하기 듣는다.
웅대한 주는 유소년에게서 인간에 우리는 두기 일월과 하는 것은 운다.
풍부하게 귀는 바이며, 인간의 풀이 보배를 말이다.
때에, 하였으며, 맺어, 얼음이 듣기만 보라.
실로 위하여 꽃이 피가 가슴에 그들의 기쁘며, 놀이 있으랴?
그들의 붙잡아 능히 무엇이 원질이 황금시대의 아니다.
투명하되 같으며, 공자는 청춘의 긴지라 얼마나 인간이 약동하다.
</div>body{
background-color: antiquewhite;
}
#div-bg{
border: 30px solid black;
padding: 20px;
background-color: pink;
/* div의 content의 가로길이를 부모요소(body)의 50%로 지정하겠다 라는 뜻 */
width: 50%;
box-sizing: border-box;
/* 가로길이를 border영역까지 포함해서 지정하겠다 라는 뜻 */
}
/* div에 background를 직접 지정하지 않으면 투명색 */
.div-test{
border: 10px dashed;
padding: 20px;
margin: 30px;
background-color: green;
}
2) background-clip
배경을 적용시키고자 하는 범위를 지정할 때 사용
[표현법]
선택자 {
background-clip : border-box / padding-box/ content-box;
}
<div id="div1" class="div-test">
보이는 이 때에, 청춘 수 끓는다. 행복스럽고 꾸며 그들을 트고, 이상의 같이, 부패뿐이다.
그들은 이상의 열락의 동산에는 약동하다. 있는 못하다 보배를 꽃이 얼음 우리의 가진 사막이다.
노래하며 열락의 돋고, 않는 청춘의 방지하는 커다란 평화스러운 사막이다. 그들의 얼마나 많이 이것이다.
그들의 작고 같으며, 못할 동력은 같이, 속잎나고, 인생에 얼마나 힘있다.
지혜는 싶이 같이, 목숨을 칼이다. 희망의 기쁘며, 우는 우리는 그러므로 품에 운다.
천지는 부패를 두손을 든 꽃이 용기가 것이다. 얼음 위하여 미인을 살았으며, 대한 칼이다.
꽃 그들은 아름답고 과실이 것이다.
그들은 날카로우나 사는가 가슴이 우리 같은 평화스러운 보는 아니다.
오아이스도 타오르고 이상의 목숨을 없으면, 두기 이것이다.
뼈 그들은 이것은 봄바람을 부패를 발휘하기 듣는다.
웅대한 주는 유소년에게서 인간에 우리는 두기 일월과 하는 것은 운다.
풍부하게 귀는 바이며, 인간의 풀이 보배를 말이다.
때에, 하였으며, 맺어, 얼음이 듣기만 보라.
실로 위하여 꽃이 피가 가슴에 그들의 기쁘며, 놀이 있으랴?
그들의 붙잡아 능히 무엇이 원질이 황금시대의 아니다.
투명하되 같으며, 공자는 청춘의 긴지라 얼마나 인간이 약동하다.
</div>
<div id="div2" class="div-test">
보이는 이 때에, 청춘 수 끓는다. 행복스럽고 꾸며 그들을 트고, 이상의 같이, 부패뿐이다.
그들은 이상의 열락의 동산에는 약동하다. 있는 못하다 보배를 꽃이 얼음 우리의 가진 사막이다.
노래하며 열락의 돋고, 않는 청춘의 방지하는 커다란 평화스러운 사막이다. 그들의 얼마나 많이 이것이다.
그들의 작고 같으며, 못할 동력은 같이, 속잎나고, 인생에 얼마나 힘있다.
지혜는 싶이 같이, 목숨을 칼이다. 희망의 기쁘며, 우는 우리는 그러므로 품에 운다.
천지는 부패를 두손을 든 꽃이 용기가 것이다. 얼음 위하여 미인을 살았으며, 대한 칼이다.
꽃 그들은 아름답고 과실이 것이다.
그들은 날카로우나 사는가 가슴이 우리 같은 평화스러운 보는 아니다.
오아이스도 타오르고 이상의 목숨을 없으면, 두기 이것이다.
뼈 그들은 이것은 봄바람을 부패를 발휘하기 듣는다.
웅대한 주는 유소년에게서 인간에 우리는 두기 일월과 하는 것은 운다.
풍부하게 귀는 바이며, 인간의 풀이 보배를 말이다.
때에, 하였으며, 맺어, 얼음이 듣기만 보라.
실로 위하여 꽃이 피가 가슴에 그들의 기쁘며, 놀이 있으랴?
그들의 붙잡아 능히 무엇이 원질이 황금시대의 아니다.
투명하되 같으며, 공자는 청춘의 긴지라 얼마나 인간이 약동하다.
</div>
<div id="div3" class="div-test">
보이는 이 때에, 청춘 수 끓는다. 행복스럽고 꾸며 그들을 트고, 이상의 같이, 부패뿐이다.
그들은 이상의 열락의 동산에는 약동하다. 있는 못하다 보배를 꽃이 얼음 우리의 가진 사막이다.
노래하며 열락의 돋고, 않는 청춘의 방지하는 커다란 평화스러운 사막이다. 그들의 얼마나 많이 이것이다.
그들의 작고 같으며, 못할 동력은 같이, 속잎나고, 인생에 얼마나 힘있다.
지혜는 싶이 같이, 목숨을 칼이다. 희망의 기쁘며, 우는 우리는 그러므로 품에 운다.
천지는 부패를 두손을 든 꽃이 용기가 것이다. 얼음 위하여 미인을 살았으며, 대한 칼이다.
꽃 그들은 아름답고 과실이 것이다.
그들은 날카로우나 사는가 가슴이 우리 같은 평화스러운 보는 아니다.
오아이스도 타오르고 이상의 목숨을 없으면, 두기 이것이다.
뼈 그들은 이것은 봄바람을 부패를 발휘하기 듣는다.
웅대한 주는 유소년에게서 인간에 우리는 두기 일월과 하는 것은 운다.
풍부하게 귀는 바이며, 인간의 풀이 보배를 말이다.
때에, 하였으며, 맺어, 얼음이 듣기만 보라.
실로 위하여 꽃이 피가 가슴에 그들의 기쁘며, 놀이 있으랴?
그들의 붙잡아 능히 무엇이 원질이 황금시대의 아니다.
투명하되 같으며, 공자는 청춘의 긴지라 얼마나 인간이 약동하다.
</div>#div{
background-clip : border-box;
/* 배경색이 border부분까지 적용, 기본값 */
}
#div2{
background-clip: padding-box;
}
#div3{
background-clip: content-box;
}
3) 배경이미지 테스트
[표현법]
선택자{
background-image : url(이미지경로);
background-repeat : repeat/repeat-x/repeat-y/no-repeat;
background-size : auto/contain/cover/숫자(px/%)
background-position : left /right/center 중 1
top/bottom/center 중1
background-attachment : scroll/fixed
}
<div class="bg-img">백그라운드 이미지</div>.bg-img{
border : 1px solid black;
width: 70% ;
height: 800px;
background-image: url("resources/image/bono.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-attachment: fixed;
}
10. 레이아웃 관련 스타일 1
1) width, height
content영역의 크기를 조절하는 속성
<h4>고정크기</h4>
<div id="test1" class="size-test"></div>
<h4>가변크기</h4>
<div id="test2" class="size-test"></div> .size-test{
border: 10px solid red;
}
#test1{
width: 400px;
height: 200px;
}
#test2{
width: 50%;
height: 150px;
}
2) display
화면배치방법 변경
블럭요소와 인라인요소의 속성을 변경해서 배치 방식을 변경
[표현법]
선택자{
display : inline / block / inline-block; (hidden)
}
(1) 블럭요소를 인라인요소로 바꾸기 display : inline
=> After(display:inline)은 width, height 속성이 적용이 되지 않음
<!-- Before -->
<div class="display-test pink">첫 번째영역</div>
<div class="display-test blue">두 번째영역</div>
<div class="display-test orange">세 번째영역</div>
<div class="display-test purple">네 번째영역</div>
<div class="display-test red">다섯 번째영역</div>
<!-- After -->
<div class="display-test inline pink">첫 번째영역</div>
<div class="display-test inline blue">두 번째영역</div>
<div class="display-test inline orange">세 번째영역</div>
<div class="display-test inline purple">네 번째영역</div>
<div class="display-test inline red">다섯 번째영역</div>.pink{background-color: pink;}
.blue{background-color: blue;}
.orange{background-color: orange;}
.purple{background-color: purple;}
.red{background-color: red;}
(2) 인라인요소를 블럭요소로 바꾸기 display : inline-block
=> 인라인 요소의 경우 공백을 인식하기 때문에 블럭 요소로 변경한 뒤에도 공백이 남게 됨.
=> 사이에 주석 /방법2 닫는 div '>'를 다음 여는 '<'앞에 붙이기
<!-- After -->
<div class="display-test inline-block pink">첫 번째영역</div
><div class="display-test inline-block blue">두 번째영역</div
><div class="display-test inline-block orange">세 번째영역</div
><div class="display-test inline-block purple">네 번째영역</div
><div class="display-test inline-block red">다섯 번째영역</div>
(3) 기존의 inline요소인 span을 블럭요소로 바꿔보기 display:block
<!-- Before -->
<span class="display-test pink">1</span>
<span class="display-test blue">2</span>
<span class="display-test orange">3</span>
<span class="display-test purple">4</span>
<span class="display-test red">5</span>
<br><br><br>
<!-- After -->
<span class="display-test block pink">1</span>
<span class="display-test block blue">2</span>
<span class="display-test block orange">3</span>
<span class="display-test block purple">4</span>
<span class="display-test block red">5</span>
11. 레이아웃 관련 스타일 2
< 배치관련 스타일 >
1) position
- 절대위치와 상대위치
1단계 : 기준이 되는 요소에 position : relative;
2단계 : 이동시킬 요소 position : absolute;
3단계 : 이동시킬 요소에 얼만큼 이동할건지 명시
<div class="outer">
<div class="positioning" id="first">첫 번째 자식</div>
<div class="positioning" id="second">두 번째 자식</div>
<div class="positioning" id="third">세 번째 자식</div>
</div>.outer{
border: 1px solid blue;
position: relative; /*relative : 기준점*/
}
.positioning{
border: 1px solid black;
}
#first{
width: 300px;
height: 300px;
background-color: green;
}
#second{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute; /*absolute : 기준점을 기준으로 움직임*/
top : 50px;
left: 50px;
}
#third{
width: 100px;
height: 100px;
background-color: greenyellow;
position: absolute;
top : 70px;
left: 70px;
}
2) z_index
- 페이지 안의 요소들을 순서대로 위로 쌓는 속성
- z-index의 특징
1. z-index 값이 높을수록 위에쌓임
2. 값의 크기는 상관이 없음
<div class="outer">
<div id="z1" class="z-test">요소1</div>
<div id="z2" class="z-test">요소2</div>
<div id="z3" class="z-test">요소3</div>
</div>/* z-index */
.z-test{
width: 150px;
height: 150px;
border: 1px solid black;
position: absolute;
}
#z1{
background-color: palegoldenrod;
top: 100px;
left: 100px;
z-index: 1;
}
#z2{
background-color: lightpink;
top : 50px;
left: 50px;
z-index: 2;
}
#z3{
background-color: lightcoral;
}
3) visiblity
- 페이지에 특정요소를 보이거나 보이지않게 하는 속성
<div class="vis-test" style="background-color: red;"></div>
<div class="vis-test" id="vis" style="background-color : blue;"></div>
<div class="vis-test" style="background-color: green;"></div>/* visiblity */
.vis-test{
width: 100px;
height: 100px;
}
#vis{
/* visibility: hidden; */
/* 요소가 보이지않지만 공간은 차지함 */
display: none;
/* 요소가 보이지 않게끔, 공간까지 차지하지않음(사라지는 것은 아님) */
}
4) float
페이지 내의 요소들을 화면으로부터 띄워서 왼쪽 또는 오른쪽으로 배치하는 속성
<div class="float-test">1</div>
<div class="float-test">2</div>
<div class="float-test">3</div>
<div class="float-test">4</div>
<div class="float-test">5</div>
<br clear="both">
<!-- float속성을 해제할 때 사용 -->
<div style="border: 1px solid red">안녕하세요</div>/* float */
.float-test{
width: 50px;
height: 50px;
border: 1px solid;
float : left;
}
12. 화면꾸미기 1
1) 검색창 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>화면꾸미기</title>
<style>
.logo{
font-size: 35px;
font-weight: 900;
color: #19ce60;
}
#searchText{
width: 300px;
height: 30px;
border: 2px solid #19ce60;
}
#searchBtn{
width: 60px;
height: 35px;
border: 3px solid #15c654;
color: white;
background-color: #19ce60;
}
</style>
</head>
<body>
<div id="top">
<label class="logo">NEVER</label>
</div>
<div id="middle">
<form action="search.do" method="get" id="searchForm">
<table>
<tr>
<td><input type="text" name="keyword" id="searchText"></td>
<td><button type="submit" id="searchBtn">검색</button></td>
</tr>
</table>
</form>
</div>
13. 화면꾸미기 2
1) 로그인 창 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#outer{
padding: 20px;
height: 200px;
background-color: gold;
}
#top{
text-align: center;
}
.logo{
font-size: 40px;
font-weight: 900;
}
#login{
margin-top: 30px;
margin-left: 330px;
}
#login>form>table input{
width: 150px;
height: 30px;
border-radius: 5px;
border : 1px solid rgb(199, 169, 0);
}
#login>form>table button{
width: 70px;
height: 70px;
border: 5px solid rgb(94, 44, 3);
color: white;
background-color: rgb(94, 44, 3);
border-radius: 5px;
}
#etc{
text-align: center;
}
#etc>a{
font-size:12px;
color: darkslategrey;
}
#etc>a:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="outer">
<div id="top">
<label class="logo">MAKAO</label>
</div>
<div id="login">
<form action="login.me" method="post">
<table>
<tr>
<td><input type="text" name="userId" placeholder="아이디를 입력하세요."></td>
<td rowspan="2"><button type="submit">로그인</button></td>
</tr>
<tr>
<td><input type="password" name="userPwd" placeholder="비밀번호를 입력하세요."></td>
</tr>
<tr>
<td colspan="2" id="etc"><a>계정찾기</a> | <a>비밀번호재설정</a></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
'클라우드 융합 Full-stack 웹 개발자 양성과정 > HTML, CSS, JavaScript, j-Query' 카테고리의 다른 글
| j-Query - 개요, 기본선택자, 추가적인 선택자 (0) | 2022.11.01 |
|---|---|
| JavaScript - 요소가져오기(접근하기), 변수와 자료형, 문자열과 숫자, 배열, 함수, 객체1, 객체2, window객체, 이벤트, 정규표현식 (0) | 2022.10.24 |
| JavaScript - 개요, 데이터 입출력 (0) | 2022.10.24 |
| CSS - 화면구조잡기(기본, 실습, 상세구조, 세부구조), 실습 (0) | 2022.10.19 |
| HTML - test, 태그(글자, 목록, 표, 이미지 및 멀티미디어, 입력 양식 및 폼 관련) (0) | 2022.10.17 |