CSS..너 누구니..?(feat. html)

난 미적감각이 0인 사람이기에 CSS를 가까이하지 않았다.. (핑계임)

금요일에는 css를 배웠는데 이해 80%완료. 근데 왜 적용이 안되니...?ㅋㅋㅋㅋㅋㅋ..

일단 배운 것 정리부터 시작!

 

---

form	action=”전달 파일명(백엔드 jsp, servlet, spring, controller)”
input	type=text/password/hidden/checkbox/radio/submit, image(이 두 태그는 form의 action속성과 연관이 있는 속성들)/reset/button(기능은 자바스크립트를 사용해 넣어줌) id=”A”
label	for=”A”;(input태그 중 id가 A인 값을 가져오겠다.
textarea	cols=”40” rosw=”4” 40글자, 4줄정도 입력가능(4줄 넘어가면 스크롤바 생김) 여러줄 텍스트를 입력할 수 있는 확장된 태그(text보다 큼)
select/option	선택 가능 <select> <option>궁서체</option> <option>고딕체</option> </select> select의 multiple 속성: 드롭다운 목록에서 둘 이상의 항목을 선택할때 사용(체크박스랑 비슷한듯!)

pattern="[A-z 가-힣 0-9]{5,10}">

[대문자 A부터 소문자z / 한글 / 숫자까지 모두 가능] {5글자 이상 10글자 이하 가능}

 

여기까지 html복습!

 

---

CSS란?!

Cascading Style Sheets

색상, 배치규칙, 크기, 여백 등 효과를 줄 수 있다.

 

1.  CSS 우선순위
기본적으로 css 속성 덮어쓴다.

0순위. !important 0순위
1순위. 우선순위 inline방식 
2순위. id선택자 
3순위. class선택자 
4순위. 태그선택자 

<style>태그 사용법

: <style type="text/css">

  태그명 / #id값 /.class속성값 {css속성명:css값;  ;  ;}

  </style>

 

예시)

 p{background-color: olive; } => 모든 p태그의 백그라운드 색상을 변경해라
 #first{color: navy;} => id값이 first인 태그의 폰트색상을 navy로 변경
.pinkgroup{color: pink;} => h1,h3 태그만 스타일 넣고싶을때 class를 지정해서 사용.

h3{color: orange !important;}  => !important 하면 0순위!!!

 

-우선순위 보충 설명

1. inline방식

<p style="color: red">스타일 저장 방법을 연습합니다.</p> 

태그에 직접 스타일을 지정해주는 방법.

 

2. 내부파일지정방식
<p>스타일 저장 방법을 연습합니다.</p>

<style>태그에 작성하는 방법이다.

     <style type="text/css">

      p{color: green;}

     </style>

 

3. 외부파일지정방식
<p>스타일 저장 방법을 연습합니다.</p>

스타일태그 없이 css파일을 생성하여 작성한다.

 

width: 가로길이를 지정

width: 200px;

width: 50%;

 

height: 세로길이를 지정
height: 100px;

height: 50%;

 

margin: 바깥쪽 여백 지정
margin: 10px 20px 30px 40px; => 1.위 2.오른쪽 3.아래쪽 4.왼쪽 
margin: auto; => 브라우저 크기가 달라지면 자동으로 조절
margin: 40px; => 4면 모두 40px로 통일

 

padding: 안쪽 여백 지정

padding: 40px 0px 0px 40px; => margin과 동일

 

 

display: 화면에 어떻게 보여줄지 결정

display: none; => 화면에서 보이지 않음.

display: block; => 기본값. 

display: inline; => 줄바꿈없이 한 줄로 나란히 나열

 

 

---

오늘은 여기까지만...