[웹프로그래밍] 11 CSS
css
html페이지에 style을 적용하는 방법
- 구성
span {
color : red;
}
-span : selector(선택자)
-color : property
-red : value
css을 적용하는 3가지 방법
1. inline
html 태그 안에 적용. 가장 우선으로 작용한다
2. internal
head 내에 <style>태그로 지정
구조/스타일이 섞이게 되어 유지보수가 어렵지만 별도의 css 파일 관리가 필요없어 서버에 css 파일의 요청을 보낼 필요가 없다
3. external
외부파일 (.css)로 지정하는 방식
css 코드가 아주 짧은 경우가 아니라면 이 방식이 가장 좋다
큰 css 파일은 여러개의 파일로 분리하여 합쳐 서비스에서 사용하기도 함
- 우선순위
inline > internal=external
html페이지에 style을 적용하는 방법
- 구성
span {
color : red;
}
-span : selector(선택자)
-color : property
-red : value
css을 적용하는 3가지 방법
1. inline
html 태그 안에 적용. 가장 우선으로 작용한다
2. internal
head 내에 <style>태그로 지정
구조/스타일이 섞이게 되어 유지보수가 어렵지만 별도의 css 파일 관리가 필요없어 서버에 css 파일의 요청을 보낼 필요가 없다
3. external
외부파일 (.css)로 지정하는 방식
css 코드가 아주 짧은 경우가 아니라면 이 방식이 가장 좋다
큰 css 파일은 여러개의 파일로 분리하여 합쳐 서비스에서 사용하기도 함
- 우선순위
inline > internal=external
- CSS의 상속
상위에서 적용한 스타일은 하위에도 상속되어 반영된다
이로 인해 여러 단계로 중첩된 엘리먼트에 매번 같은 스타일 속성을 부여할 필요가 없다
BUT, box-model이라고 불리는 속성들 (width, height, margin, padding, border) 처럼 배치와 관련된 속성들은 하위 엘리먼트로 상속되지 않는다
- css의 우선순위
css는 여러가지 스타일 정보를 기반으로 최종적으로 경쟁에 의해 적절한 스타일인 결정된다 => cascading
1. 선언방식에 따른 차이
inline>internal>external
2. 선언 순서에 따른 차이
- 나중 것 우선
- 더 구체적인 것 우선
- id > class > element
: 등 여러가지 규칙에 따라 각 스타일에 점수를 부여하여 가장 높은 점수를 가진 스타일 속성 지정함
> google- css specifity 검색시 더 자세히 알 수 있다.
* Display 속성
- none : 보이지 않음
- block
div, p, h, li 태그 등. 가로영역을 모두 채우며 block 요소 다음에 등장하는 태그는 줄바꿈이 된 것 처럼 보임. width, height 속성을 지정할 수 있다.
- inline
block과 달리 줄 바꿈이 되지 않고 width, height 지정불가. 글자나 문장에 볼드, 이탤릭, 색상, 밑줄 등의 효과를 주기 위해 존재하는 단위. span, b, i, a 태그 등이 있음. inline 요소 뒤에 나오는 태그는 줄바꿈 되지 않고 바로 오른쪽에 표시된다.
- inline-block
block과 inline의 중간 형태. 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다.
- CSS selector
트리 구조로 되어있는 데이터를 빠르게 찾아가는 매칭 방식 ( DOM tree)
tag
: 태그 이름을 쓴다.
id
java script 에서 쿼리 셀렉터는 #myspan시 div 바로 아래 제일 상위 span 태그만을 의미하지만 css에서는 id값으로 myspan을 가지는 모든 태그에 설정이 반영된다.
하지만 id는 고유하게 설정을 두는것이 바람직함
class
- 상속
<head>
<style>
#jisu > p : nth-child(2) { color : red}
</style>
</head>
<body id = "jisu">
<h2> 제목 </h2>
<p>첫번째 </p>
<p>듀번째 </p>
일 떄 , 결과는 <p>첫번째</p>블럭의 속성으로 지정되는데
nth-child 는 태그에 상관없이 자식 수를 센다. 반면 nth-of-type 은 해당 태그의 자식 수만을 센다.
p:nth-child(2) : 두번째 자식이 p태그인 경우에만 속성을 지정
p:nth-of-type(2) : 두번째 p 태그 자식에 속성을 지정
- font 색생 변경
- color : red;
- color : rgb(25,0,0);
- color : #ff0000; //16진수 표기법으로 가장 많이 사용됨
-font 사이즈
- 배경색
- background-color : #ff0;
- background-image :
-글씨체 /글꼴
- font-family : "Gulim" ;
이 외에 웹 폰트도 있음 , 대표적으로는 구글 웹폰트가 잇으며 다양한 크기에서 품질을 유지하는 벡터 방식의 아이콘 웹폰트도 등장했다.
기본 unicode를 사용해서 간단한 아이콘을 표현하는 것도 가능함
layout (rendering) : 엘리먼트를 화면에 배치하는 것
위 > 아래, 순서대로 블럭을 이루며 배치되는 것이 기본이다. 하지만 웹사이트에서는 다양한 방식으로 엘리먼트를 배치해야 하기 때문에 추가적 속성을 제공한다.
display (block, inline, inline-block)
position ( static, absolute, relative, fixed)
float(left, right)
- position
상대적/ 절대적으로 어떤 위치에 엘리먼트를 배치하는 것을 수월하게 하기 위해
1. 기본으로 static
2. absolute
기준점에 따라 top/left/right/bottom 으로 설정됨
기준점 : 상위 엘리먼트중에 static이 아닌 position
top, left 0,0이라도 꼭 주는게 좋다
3. relative
원래 자신이 위치해야 할 곳을 기준으로 이동
top/ left/right/bottom
4. fixed
viewport(전체화면) 좌측, 맨위를 기준으로 동작
1position - body를 기준점으로 잡는다
- margin
간격을 준다
ex ) margin-top, margin-left ...
- float
기존의 배치에서 벗어나 예외적으로 둥둥떠다니는 형태로 배치된다.
뒤에 나오는 block element는 float 된 element를 인식하지 못하고 중첩되어 배치된다.
- box-model
border
padding
margin
box-shadow : border 밖에 테두리를 그리는 속성, 일종의 박스 모델에 포함돼서 표현
* 엘리먼트의 크기는 기본적으로 부모의 크기를 그대로 상속받음
box - sizing
: padding 값을 box size 보다 크게 주면 엘리먼트가 커질 수 있다.
box-sizing : content-box 일 경우 컨텐츠가 계속 커질 수 있지만
box-sizing : border-box -> 박스의 크기를 테두리border 라고 지정 해주는 것
<정리>
layout 구현방법은?
- 전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현한다. 최근 css-grid, flex 속성 등 layout을 위한 속성이 나왔으니 확인 해 볼 것. 기본 배치는 float를 많이 사용
- 특별한 위치에 배치하기 위해서는 position absolute, relative등을 사용
- block element 를 inline-block으로 변경하여 가로로 배치하기도 함. 크기 지정도 가능해진다
- 엘리먼트 안의 텍스트 간격 - padding, 다른 엘리먼트 간 간격 - margin
- position 속성이 없는 클래스의 경우 position이 걸린 클래스 이전에 렌더링 됨. position은 float보다 우선 순위가 높다.
- layout 정리된 사이트
https://thrillfighter.tistory.com/480
https://ko.learnlayout.com/display.html
https://ofcourse.kr/
- 게임으로 배우는 layout
http://flukeout.github.io/#
기본 unicode를 사용해서 간단한 아이콘을 표현하는 것도 가능함
<div> 안녕하세요 ☺</div> //☺ 웹 화면에는 웃음 표시가 표현되는 코드layout (rendering) : 엘리먼트를 화면에 배치하는 것
위 > 아래, 순서대로 블럭을 이루며 배치되는 것이 기본이다. 하지만 웹사이트에서는 다양한 방식으로 엘리먼트를 배치해야 하기 때문에 추가적 속성을 제공한다.
display (block, inline, inline-block)
position ( static, absolute, relative, fixed)
float(left, right)
- position
상대적/ 절대적으로 어떤 위치에 엘리먼트를 배치하는 것을 수월하게 하기 위해
1. 기본으로 static
2. absolute
기준점에 따라 top/left/right/bottom 으로 설정됨
기준점 : 상위 엘리먼트중에 static이 아닌 position
top, left 0,0이라도 꼭 주는게 좋다
3. relative
원래 자신이 위치해야 할 곳을 기준으로 이동
top/ left/right/bottom
4. fixed
viewport(전체화면) 좌측, 맨위를 기준으로 동작
1position - body를 기준점으로 잡는다
- margin
간격을 준다
ex ) margin-top, margin-left ...
- float
기존의 배치에서 벗어나 예외적으로 둥둥떠다니는 형태로 배치된다.
뒤에 나오는 block element는 float 된 element를 인식하지 못하고 중첩되어 배치된다.
- box-model
border
padding
margin
box-shadow : border 밖에 테두리를 그리는 속성, 일종의 박스 모델에 포함돼서 표현
* 엘리먼트의 크기는 기본적으로 부모의 크기를 그대로 상속받음
box - sizing
: padding 값을 box size 보다 크게 주면 엘리먼트가 커질 수 있다.
box-sizing : content-box 일 경우 컨텐츠가 계속 커질 수 있지만
box-sizing : border-box -> 박스의 크기를 테두리border 라고 지정 해주는 것
<정리>
layout 구현방법은?
- 전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현한다. 최근 css-grid, flex 속성 등 layout을 위한 속성이 나왔으니 확인 해 볼 것. 기본 배치는 float를 많이 사용
- 특별한 위치에 배치하기 위해서는 position absolute, relative등을 사용
- block element 를 inline-block으로 변경하여 가로로 배치하기도 함. 크기 지정도 가능해진다
- 엘리먼트 안의 텍스트 간격 - padding, 다른 엘리먼트 간 간격 - margin
- position 속성이 없는 클래스의 경우 position이 걸린 클래스 이전에 렌더링 됨. position은 float보다 우선 순위가 높다.
- layout 정리된 사이트
https://thrillfighter.tistory.com/480
https://ko.learnlayout.com/display.html
https://ofcourse.kr/
- 게임으로 배우는 layout
http://flukeout.github.io/#
- flex
float , inline-block 등으로 수평 구조를 구현할 수는 있지만 clear, white space 등으로 여러가지 문제를 해결해야 함에 따라 새로운 Flexible Box라는 속성이 새롭게 등장하였다.
- 사용 방법
Container(box-container)에 display:flex를 적용
.box-container {
display: flex;
}
- Container에 사용 가능한 속성
display, flex-flow, justify-content 등
justify-content: flex 요소들을 가로선 상에서 정렬한다.
flex-start (defalut) / flex-end / center / space-between / space-around
align-items: flex 요소들을 세로선 상에서 정렬한다
flex-start / flex-end / center / baseline / stretch(default)
flex-direction : 정렬할 방향을 지정한다
row(default) / row-reverse / column / column-reverse
flex-wrap : flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬한다
nowrap (default) / wrap / wrap-reverse
flex-flow : flex-direction + flex-wrap
align-content : 세로선 상 여분의 공간이 있는 경우 컨테이너 사이의 간격을 조정
flex-start / flex-end / center / space-between / space-around / stretch(default)
- Items에 사용 가능한 속성
order, flex, align-self 등
order : flex 요소의 순서를 지정한다.
align-self : align-items값을 무시하고 요소를 세로 선 상에서 정렬한다
flex-start / flex-end / center / baseline / stretch
![[웹프로그래밍] 11 CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgUVMPumWe5NpcJJCKG5OpdycPupcCJmIT43FKDYu8_ZSqve4ZGfxQTbQpJ21t601JvwougVzHAGi1yzyIRER0ugTqky34IbZ7e10z00pnzeAD39vdHb_CYqt09QqboReI70L4gAIAO8/s72-c/css_01.PNG)
No comments: