css(cascading style sheets)
1. 개요
- 웹 문서를 구성하는 구성요소에 스타일을 적용하거나 레이아웃을 설정하기 위해서 사용
- HTML(data)을 이용해서 구성요소를 정의하고 CSS(style)를 이용해서 꾸미고 Javascript(dynamaic process)를 이용해서 동작을 정의
- 계단처럼 단계적으로 스타일을 적용
- 글꼴, 화면 배치, 특정 색 등을 스타일로 정의 가능
- 데이터와 스타일을 분리해서 유지보수성을 높임
2. CSS에서 작업할 일
- 사용방법
- 선택자
- 기본속성
- 텍스트관련
- 기타(테이블, 배경, 리스트)
- 박스모델
- 포지셔닝
- 플로팅과 레이아웃
3. CSS 사용방법
프론트측 기술 사용 방법
1. <head>태그 안에 정의하고 사용하는 방법
: 해당 html 문서 내에서만 스타일 적용
2. inline방식 : 해당 태그에만 스타일 적용
<시작태그 style="속성1:속성값1; 속성2:속성값2....">내용</종료태그>
- 가장 우선순위가 높게 적용됨
- 정의된 태그에만 스타일시트가 적용됨
3. 외부파일로 정의하고 사용
<link rel="stylesheet" type="text/css" href="../common/css/mystyle.css">- rel="stylesheet" -> 현재 연결된 문서가 어떤 것과 연관이 있는지 명시
- type="text/css" -> 브라우저가 해석할 수 있도록 response에 대한 타입을 정확하게 명시
- href="../common/css/mystyle.css" -> 연결할 문서의 path
*정적리소스 : common에 리소스를 모은 css 폴더 만들었음
!important를 설정하면 다른게 다 무시가 되고 이게 젤 중요한거니까 우선적용됨
4. 선택자 ☆
선택자 :css를 적용할 대상, HTML내에서 어떤 컨텐츠에 CSS를 적용할 것인지 정의할 목적
선택자 {
속성1:속성값1;
속성2:속성값2;
...
}핵심 요약
- 기본 선택자
-> 태그명
-> class
-> id - 가상 선택자
- 속성 선택자
- DOM tree
- CSS 사용법 3가지
-> 외부 파일 연결
-> style 태그
-> 특정 태그 내 style 속성
우선순위
-
!important > id 선택자 > class선택자, 복합구성선택자, …등등 > 태그선택자 > 전체선택자( * )
-
우선순위가 동일한 경우⇒ 레벨이 동일한 경우, 마지막에 해석된(제일밑에있는) css가 우선
선택자 종류
1. 전체선택자
: 모든 요소를 선택
*{
color: red;
}2. 태그선택자
- 태그명
: 정의한 태그를 모두 선택해서 속성을 적용
li{
color: yellow;
}- 태그명, 태그명...
: 여러 태그에 동일한 서식을 적용하기 위해서
h3, h4{
color: blue;
font-size: 18pt;
border: solid 2px red;
font-weight: bold;
}3. class선택자
- .클래스이름
- 여러개 동시에 같은 스타일 적용.사용 많이함, css입힐때 주로 사용
- 정의한 class속성명에 해당하는 요소만 속성을 적용
- class 속성은 모든 태그에 정의하고 사용할 수 있는 속성
- 중복해서 정의가 가능(동일한 class명을 여러 요소에 정의할 수 있다.)
- 동일한 서식을 태그와 상관없이 여러 곳에 정의할 때 사용
.myclass{
color: pink;
}4. id선택자
- #아이디이름
- 특정한 하나만 스타일 적용, 사용 많이함
- 태그에 id속성으로 정의되는 요소에 css를 적용
- 식별하기 위해 사용하는 선택자이므로 한 페이지에서 동일한 id는 정의하지 않는다.
-javascript나 jQuery에서 사용
#myid{
color: olive;
}5. 복합구성선택자 **
■ 태그명.클래스명
- 태그명.클래스명 {
속성:속성값
}
: 아래 정의된 두 가지 조건을 모두 만족하는 요소가 선택
p.myclass{
color: aqua;
}=> p태그 중에서 class속성이 myclass로 정의된 요소를 선택
■ 선택자1 > 선택자2
- 선택자1의 자식요소인 선택자2를 선택
'바로 아래'의 하위요소만 선택
div > .myclass{
color: orange;
font-size: 20pt;
font-weight: bold;
} => div의 바로 아래 하위요소 중에서 class속성이 myclass인 요소를 선택
■ 선택자1 선택자2
- 띄어쓰기가 구분기호
- 선택자1의 하위요소인 선택자2를 선택
선택자1의 '모든 하위요소'
div .myclass{
color: orange;
font-size: 20pt;
font-weight: bold;
}=> div의 하위요소 중에서 class속성이 myclass인 모든 하위요소를 선택
■ 선택자1 + 선택자2
- 형제요소를 선택하기 위한 방법
- 선택자1의 바로 다음 형제요소인 선택자2를 선택
.css + li{
color: green;
font-size: 30pt;
}=> css라는 클래스 속성으로 정의된 요소의 바로 다음 형제요소인 li선택
■ 선택자1 ~ 선택자2
- 형제요소를 선택하기 위한 방법
- 선택자1의 다음 형제 요소 중 선택자2에 해당하는 모든 요소를 선택
.css ~ li{
color: purple;
font-size: 50pt;
}6. 가상선택자
: 실체가 없음, 실제요소가 존재하는게 아니라 마우스를 가지고 선택하는작업(포커스, 클릭, 체크 등), 요소에 자극발생 또는 매번 달라지는 상황을 가정
: 어떤 상태가 발생했을때를 선택자로 활용하는 경우 사용
선택자 : 상태
- a : link ->a태그에 연결된 링크에 방문전
- a : vsited ->방문후
- 선택자 : hover ->마우스를 요소에 올려놓은 상태
- 선택자 : active
→마우스로 요소를 선택하고 있는 동안의 상태를 선택자로 활용
→마우스클릭을 계속 유지하고 있는 - 선택자 : first-child ->첫번째 자식요소
- 선택자 : last-child -> 마지막 자식요소
7. 속성 선택자
모든 input속성의 타입이 text인 경우 배경색 yellow로 만들기
input[type="text"]{
background-color: yellow;
}
background-repeat: no-repeat
background-repeat: repeat-x
박스모델의 속성
출처 : w3s school
- width, height 너비 높이
- padding -컨텐츠와 보더 사이의 간격
- border 바깥테두리선
- margin 테두리 바깥 여백
=>이 네개 쓰려면 <div>로 묶어서..
margin-left: auto;
margin-right: auto;
=>가운데정렬(그전에 width = 80% 이런식으로 조정하기)회사에선 시맨틱 태그와 div와 섞어서씀
박스모델은 css속성 외에도 그룹화하고 중첩해서 묶는 개념이 적용되어야함
1주차 느낀점
- 배운 내용을 글로 정리하는 것도 중요하지만.. 실습을 계속 해보는 게 머리에 더 오래 남는 것 같다.
- 수업 내용을 꾸준히 정리하니 수업을 들을 때 어떤 걸 더 신경써야할지 감이 잡히는 듯 하다.
- 과제를 할 때 완성이 되면 타수강생은 같은 결과물을 나와 어떻게 다르게 만들었는지 살펴보는 것도 의미있는 행동이라고 느낀다.(깔끔하게 짜는 수강생들을 흉내내볼 기회도 되고..)
- 공부했던 파일 살펴보며 복습하기
- 막막할 땐 해야할 일의 단계를 나눠서 정리하면 시작하기가 더 수월해진다.
- 꾸준히, 계속 할 수 있을만한 루틴과 방법을 계속 고민하고 업데이트 해봐야겠다.
본 포스팅은 멀티캠퍼스의 멀티잇 백엔드 개발(Java)의 교육을 수강하고 작성되었습니다.
