CSS 1-1

beans_I·2023년 9월 9일

[23-2] 웹프로그래밍

목록 보기
2/13

CSS

Casting Style Sheets

스타일을 위한 시트.

-> html의 스타일 적용의 문제점을 해결해 줄 수 있는 구세주이다. CSS를 사용한다면은 element에 각각 스타일을 꾸며야 하는 노가다를 안해도 된다!


Declaration : ;을 기준으로 분류된다.

포괄적인 선택자 종류

simple selector - element를 선택하는 선택자이다. 오늘은 이걸 위주로 나아갈 예정이다.
Combinator selector - 자손 선택자.
Pseudo-class slector - 가상 선택자. 뒷 게시글에 나올 :hover가 가상 선택자 중에 하나이다.
Attribute selectors (select elements based on an attribute or attribute value) : 속성 선택자. [title]같이 속성에 스타일을 적용할 떄 사용된다.
자세한 내용은 https://choijying21.tistory.com/15 에서 참고하자.

element 선택자 종류

  1. id 선택자 : 온리원 (id card) : #을 이용한다.
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
  1. 클래스 선택자 : class=''로 그룹화된 것들을 선택. .을 이용하여 불러온다.
    클래스: 포괄적인 그룹핑
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>

TIP : 한 element는 여러 클래스를 가질 수 있으며, 특정 element의 클래스를 불러오려면 element.class{}형식을 사용하면 된다. 

<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>

  1. 전체 선택자: *은 바디 안에 있는 모든 요소들을 선택한다.

  2. 스타일 그룹핑: ,을 이용하여 여러 요소들에게 동일한 스타일을 적용할 수 있다.

스타일 적용 방식

  1. internal style sheet: head내의 <style>에서 적용한다. 따로 스타일을 관리하므로 가독성 및 수정하기 편하다.
  2. externel style sheet: head내에서 <link rel='stylesheet' href='style.css'>로 외부 css파일을 불러와 적용힌다.
  3. inline style: 요소 안에서 스타일을 적용한다.

캐스팅 순서

id - class -default (특수한 것 부터 진행이 된다.)
inline - (internal or external) (나중에 나타난 부분이 적용된다.)
if) internal과 external을 동시에 작성하면? -> 나중에 등장한 순서로. -> id나 class를 이용하여 구분을 확실히 하자.

css주석

/* */

css 컬러

표현방식

  1. 16진수: ##FFFFFF (#RRGGBB)
  2. 10진수(RGB): 0, 12 ,34 (R ,G, B). a로 불투명도 조절이 가능하다.
  3. hsl: (색상, 채도, 밝기)
    기본 정의된 컬러 : https://www.w3schools.com/colors/colors_names.asp

텍스트 백그라운드 컬러,
이외 참고

CSS background

element에 지정하여 설정이 가능하다.
이미지나, 반복 등의 설정이 가능하다.

property(Shorthand)

  1. background-color: element 뒷 화면의 컬러 설정.

  2. background-image: 이건 이미지 설정. url:을 이용하여 이미지를 불러온다. Q. src, href는 어디에 쓰이는가?

  3. opacity: 투명도 설정

  4. background-repeat :

  5. background attachment-페이지가 이동할때 그림이 이동하거나 고정되거나..

이걸 하나하나 스타일로 작성하려면 가독성이 떨어진다. 그래서 background에 띄어쓰기로 구분하여 작성하면은 동일하게 적용되면서 가독성이 높아진다.
https://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand

CSS BOX MODEL


예시 : https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

PADDING - 겨울 패딩
MARGIN - 시장 사장님의 마진
feat. 생활코딩

박스 모델이 차지하는 공간은 마진 + 보더 + 패딩 + 콘텐츠(width,height)+ 마진 + 보더 + 패딩px값의 합이다.

Border

박스 모델의 테두리이다.
테두리 스타일은 아래 사이트를 확인하면 된다.

border는 기본적으로 사면 모두 스타일이 동일하게 적용되지만 top, right, bottom, left로 구분하여 스타일을 줄 수 있다.
https://www.w3schools.com/css/tryit.asp?filename=trycss_border-width

property+

  1. -width : px, in, cm 등등의 값이 가능하다. 값이 기본으로 thin, medium, thick을 이용해도 된다. 이 property 역시 띄어쓰기로 네 개의 면의 값을 부여해 줄 수 있다. (12시 기준 반시계방향) 다만 이 경우에는 shorthand로 적용은 불가하다.

  2. -color : border의 컬러를 설정해준다. 역시 네 개의 면을 따로 적용할 수 있다.

  3. -style: border의 스타일을 적용해 줄 수 있다. 역시 띄어쓰기로 각각 적용가능하다. css에서 정의되어 있지 않으면 다른 property도 적용이 안되므로 반드시 있어야 하는 값이다. (테두리가 없으면은 컬러나 테두리의 두께가 표현될 부분이 없기 때문)

  4. -radius: 반지름. 꼭지점을 라운딩 처리하는 값이다. 반지름을 px로 처리하여 둥근 정도를 설정한다. 개별 위치 수정 가능

Margin

우리 사장님의 마진.... 네 개의 면의 값을 각각 적용가능. 역시 시계 반대방향으로 적용된다.

마진의 값은 기본적으로 auto, length, %, Inherit가 있다. 현재 했던 방법은 length이다.

  1. Auto : 브라우저가 left와 right의 값을 균등하게 조절해준다. 주로 반응형 웹에 사용된다.
  2. inherit : 부모의 노드의 값을 그대로 사용한다는 것이다. 안적어도 기본적으로 상위값이 적용되는데, 유지보수를 위한 부분이라고 보면 된다.
  3. Marign의 경계붕괴(겹침 Collapse): 위 아래의 마진 한정, 마진은 덧셈이 아니라 둘 중 큰 값만이 적용된다.
    heading2의 마진값은 20px이지만 적용이 안된 부분을 볼 수 있다.

Padding

글자를 감싸는 패딩~
마진처럼 4개의 값 조정 가능하다. length, %, Inherit으로도 가능하다.

Box-sizing

원래 border박스 의 값은 패딩, 마진, W&H의 합이다. 하지만 Box-sizing : border-box를 사용한다면 박스의 픽셀값은 width가 기준이 되고, 나머지 값들은 기준값 내에서 적용된다.

width&Height

auto, length, %, Inherit, initial

max-width : 화면의 크기에 따라 박스사이즈가 조정되는 반응형이다. 최대로 늘어나는 크기만 제어

CSS TEXT

컬러, 배경 색 등.
backgroung-color
color : 텍스트 컬러

property+ (-로 시작하는 것은 -앞에 text가 들어간다. )

  1. -align : 글자의 배열. center,left,right가 있다.
    여기에 justfy라는 것도 있는데, 양쪽 정렬을 시행한다. 글자의 자간을 자동맞춤 해주는 기능이라 보면 된다.

  2. -decoration: 텍스트의 스타일이 설정 가능하다.
    - text-decoration-line(required) 쓸라면 작성해야된다.
    - text-decoration-color(optional)
    - text-decoration-style(optional)
    - text-decoration-thickness(optional)
    이 되며 역시 text-decoration의 shorthand로 적용이 된다.
    * https://www.w3schools.com/css/tryit.asp?filename=trycss_text-decoration

  3. -transform: upeercase, lowercase으로 알파벳을 조정한다.

  4. -indent : px로 들여쓰기 정도를 조절한다.

  5. letter-spacing: 글자의 자간을 조절한다.

  6. line height : 글의 간격을 조정한다. (한글 글 간격 국룰 160%은 1.6으로 조정)

  7. Word Spacing : 띄어쓰기 간격을 조절한다.

  8. White Space : 탭, 엔터 자동 줄바꿈에 관한 설정이다.

  9. '-shadow' : 글자의 그림자를 x축 이동(px), y축 이동(px), 번짐 정도(px), 색깔 정도로 구분하여 생성할 수 있다.

Font

다음 글에 계속...

profile
beans_I
노션으로 옮겼습니다. https://beans-i.notion.site/main?pvs=74
이전 포스트

Html 1-2

다음 포스트

CSS 1-2

0개의 댓글