CSS 첫 걸음

VIN·2023년 1월 2일
0

HTML/CSS

목록 보기
2/2

CSS?

  • Cascading Style Sheets
  • 웹 페이지의 디자인 담당

CSS 스타일 Inline 방식으로 적용

<!-- <p style="디자인 속성 : 디자인값;">
        Hello1 !
    </p> -->
<p style="font-size : 36px;
    color: green;
    font-weight: bold;">
        Hello1 !
    </p>
  • 태그 안에 속성 부여
  • 세미콜론(;)이 속성 종결을 나타냄
  • 반드시 속성과 속성에 해당하는 값을 적으면 그 속성의 종결의 의미로 세미콜론 추가

CSS Style 태그로 적용하기

  • head tag 안에 작성
  • Inline 형식으로 작성할 경우 바디 태그 안의 코드들이 너무 길어지기 때문에 head tag에 작성
  • 스타일을 부여하고자 하는 태그 이름을 적은 후 원하는 속성들 부여
<style>
        p {
            font-size: 36px;
            color: red;
            font-weight: bold;
        }
    </style>
  • 같은 태그가 여러개 있는 경우 그중에 원하는 태그만 선택해서 부여하고 싶을 경우 class와 id 속성 이용
  • class 속성은 .class속성명, id 속성 #id속성명
  • 우선 순위는 id가 높음 → class와 id 속성 둘다 작성되어 있을 경우 겹치는 스타일 부분은 id에 부여된 스타일 적용
  • 우선 순위 : 속성 내 인라인으로 부여된 스타일 >id > class > 태그에 부여된 스타일
<style>
        p {
            font-size: 36px;
            color: red;
            font-weight: bold;
        }
        .title {
            font-size: 36px;
            color: red;
            font-weight: bold;
        }
        #heading {
            font-size: 36px;
            color: blue;
            font-weight: bold;
        }
    </style>

class & id

  • id
    - id가 고유하지 않고 중복된다고 해도 문제는 없지만 개발자들끼리 id의 값은 고유한 값으로 사용하자고 약속
    - JavaScript에서 id 값을 사용하는 함수들에 고유한 값을 사용하지 않을 경우 문제가 발생할 수 있으니 id는 고유한 값으로 사용하는 것을 권장
  • class
    - id와 다르게 중복 허용
    - 하나의 태그에 여러개의 클래스 부여 가능. 스페이스바(공백 한칸)로 구분
<p id="heading">
        Hello !
    </p>
    <p class="title-size title-color title-weight">
        HI!
    </p>

  • 스타일 부분을 따로 파일을 만들어서 확장자를 .css로 만들어서 분리
  • head tag에서 link:css태그 생성 후 만든 href속성에 css파일 명 입력
<!-- html 태그에 들어가는 링크 태그 부분 -->
<link rel="stylesheet" href="style.css">
/* sytle.css 파일 */
p {
  font-size:24px;
}
#title {
  color: red;
}
.author {
  color: blue;
}
profile
review 블로그

0개의 댓글