티스토리 뷰

HTML+CSS

CSS기초 / day06 / 25.04.08

one-dy 2025. 4. 8. 15:01

CSS Cascading Style Sheets

CSS는 HTML과 함께 웹 표준의 기본 개념 html : 문서의 뼈대 구성, css : 뼈대에 디자인을 입히는 역할 태그의 크기, 색상, 위치 등을 제어하고 적용할 수 있다.  

문법이 1개 있다 ! , 규칙이 정해져 있다. 다양한 속성 : 과 값 ; 이 있다. 10~12개 

html 과 css는 다른 언어라 문법체계가 다르다. 우선순위의 개념 : 위에보다 아래에 있는 걸로 적용된다. 

스타일과 스타일 시트

   스타일 : 웹 문서에서 디자인을 하기 위해 사용된 코드    

   스타일시트 : 이러한 스타일이 모여있는 하나의 문서

  • !important : 무조건 고정, 해당 스타일을 무조건 확정한다는 의미로 사용한다. 스타일 중 우선순위가 가장 높아 어떤 방법으로든 수정할 수 없다. 다른 값으로 유지보수할 수 없다. 보통 스타일 속성값에 한 칸 띄고 그 뒤에 !important라고 적어 선언한다. (사용하면 안된다!)
  • 인라인스타일 : 태그 안에 style 속성을 이용하여 직접 css를 적용하는 방식. 이 방식은 우선순위가 매우 높아 유지보수가 어렵고 다른방법으로 수정하기 굉장히 어렵다. 기호가 많아 가독성이 떨어지며 코드가 지저분해진다는 특징이 있어 지금은 사용되지 않는 방법. css가 만들어진 초창기 때 쓰던 방식.
  • 내부 스타일 시트 : <head>태그 안에 <style>태그를 선언하여 태그 사이에 css 문법으로 스타일 시트를 작성하는 방법이다. 외부<내부 (우선순위 높다=유지보수성 낮다.)
  • 외부스타일 시트 : 실무에서 가장 많이 쓰인다. 최상위 폴더 안에 css폴더를 만들어 css문서를 관리하는 방식이다. css파일들은 html파일과 연결하여 사용한다. 우선순위가 낮아 유지보수에 용이하며, 파일을 별도로 관리하기 때문에 문서관리 <link rel="stylesheet" href="연결경로" />
  • 브라우저 기본 스타일 시트 : css로 디자인을 하기 이전에 브라우저에 기본적으로 내장되어 있는 스타일시트를 말한다. css파일을 만들어 초기화 과정을 거치면 웹사이트를 만들 수 있는 편한 환경으로 바꿀 수 있으며 기본 스타일 시트는 html문서를 보기 편하도록 미리 지정되어 있는 스타일 문서이다. 우선순위가 가장 낮다.

※우선순위 : 브라우저 스타일시트 >>외부스타일시트>>내부스타일시트>>인라인스타일>>!important

처음에 배울 때는 수정이 쉬운 가장 우선순위가 낮은 걸 쓰는게 좋다. 

더보기

신입 퍼블리셔가 가장 먼저 하는 업무는 유지 및 보수업무이다.

 

최상위 폴더 안에는

index.html

css

img

js

sub

있어야한다.

CSS의 기본형과 선택자

CSS에서는 어떠한 특정 태그를 선택하여 스타일을 적용하고자 할 때 다양한 방식으로 태그를 불러올 수 있다.

선택자 : '태그를 선택한다.'

 CSS의 기본형 

선택자{

 속성1 : 값1;

 속성2 : 값2;

 ...

}

 선택자종류

1. 아이디 선택자 (CSS에서 #아이디명 형식을 사용하여 태그 불러오기)  : 태그 안에 id라는 속성을 선언하여 해당 아이디 이름을 가지고 있는 특정 태그에 스타일을 적용하는 선택자. css에서는 해당 태그에는 <태그 id="아이디명"> 형식으로 쓰여져 있어야 한다. 아이디명은 고유해야한다. 아이디명은 고유하며, 한번 쓴 이름은 다른 태그에 쓸 수 없다. 보통 자바스크립트에서 해당 태그를 불러오고 싶을 때 주로 많이 사용한다. 우선순위가 높아 다른 선택자로는 스타일을 수정하기 어렵다. 

2. 클래스 선택자 (CSS에서 .클래스명 형식을 사용하여 태그 불러오기) : 태그 안에 class라는 속성을 선언하여 해당 클래스명을 가지고 있는 특정 태그에 스타일을 적용하는 선택자. id선택자와는 달리 선언한 이름을 다른 태그와도 여러 번 공유하며 쓸 수 있다. (동일한 클래스명을 가지고 있는 태그들에 디자인 스타일을 한 번에 적용할 수 있어 가장 많이 사용하는 선택자)  

해당 태그들에는 <태그 class="클래스명">형식으로 쓰여져 있어야 한다.

클래스명 지을 때 한글, 공백 사용 안된다. 숫자 안되고 영문소문자로 지어야한다.

태그이름 쓰면 헷갈려서 쓰지 않는다. 약어 줄임용어 쓰지 않기! 

3. 태그 선택자 : html태그의 이름을 직접 불러오는 선택자. html안에 있는 해당 태그를 한꺼번에 선택할 때 사용하며 우선순위가 가장 낮다. 웹 페이지 초기 세팅(=초기화)시 가장 많이 사용한다.

태그{속성명 : 속성값;} 다음 태그는 끝나는 중괄호 아래에 쓴다. 

 

※태그선택자>>클래스선택자>>아이디선택자 순으로 우선순위가 높다. 

※속성에 대한 우선순위>>선택자에 대한 우선순위가 높다. 

<h2>제목1</h2>
<h2 class="title">제목2</h2>
<h2 class="title" id="heading" >제목3</h2>

css의 주석문

/*주석문내용*/문법을 사용하여 주석을 표현한다. 

 

reset.css파일 드래그 오른쪽 끝까지 끌어서 창 반으로 나눠 보기 

주석<!--CSS연결-->을 <head> <title>아래에 달아주는 게 좋다. 부위별로 나눠서 써준다. 

[ reset.css 파일 만들기 실습 ] 

@charset "utf-8"; /*캐릭터셋 : 언어 인코딩*/
 
*{                                                                 * : 전체선택자. html에 있는 모든 태그를 선택한다. 
  margin: 0;                                                      브라우저 초기화과정에서 html에 포함된 기본여백들을 없앨 때 주로 사용한다.
  padding: 0;
}
body {
  font-family: "나눔고딕", "Nanum Gothic";     ***주 사용폰트는 나눔고딕 만약 사용자 컴퓨터 안에  나눔고딕이 없다면 두번째 폰트로 보여주기 
  font-size: 20px;     ***본문기준 글자크기 기본설정 
  color:#111;             ***프로젝트에서 메인으로 사용하는 글자컬러
  line-height: 35px;     ***줄간격 
}

 

[common.css]

/* headr,footer처럼 공통 영역을 디자인할 때 사용하는 css파일 */

 

[style.css]

메인 컨텐츠 영역에 스타일 

더보기

실무 투입하면 reset.css파일 복사해서 쓰면 된다.

 

폰트를 여러개 불러올 때 콤마(,)로 구분한다. 주 사용font는 나눔고딕, 만약 사용자 컴퓨터 안에 

font-family 단어와 단어가 들어가는 속성의 경우 -(dash)써준다. 

탐색기에 글꼴이라 검색하면 제어판 설정창이 나온다.  글꼴 설정 클릭하면 컴퓨터 안에 설치된 폰트가 나온다. 

1글꼴 3글꼴 6글꼴... →font-family 찾은 이름 그대로 css에 적어주면 된다. 메타데이터용 폰트를 선택하세요 옵션을 누르면 

숙제 

1. h2에 "title"이라는 이름의 클래스명 짓기 

2. p태그들에 content라는 이름의 아이디명 짓기 

3. 클래스명이 title인 태그를 불러와서 배경색과 글자색 지정하기

4. 아이디명이 content인 태그를 불러와서 배경색과 글자색 지정하기

5. p태그를 불러와서 글자크기와 색상 바꾸기 

 

'HTML+CSS' 카테고리의 다른 글

HTML+CSS / 레이아웃 만들기 / flex / day10 / 25.04.14  (0) 2025.04.15
HTML CSS 기초 / day09 /25.04.11  (0) 2025.04.14
CSS 기초 / 블록속성특징 / css박스모델 / day07 / 25.04.09.  (0) 2025.04.13
HTML 기초배우기 / day05 / 25.04.07  (0) 2025.04.07
HTML 기초배우기 / day02-04 / 25.04.02~04  (0) 2025.04.06