• 티스토리 홈
  • 프로필사진
    Song hyun
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
Song hyun
  • 프로필사진
    Song hyun
    • 분류 전체보기 (780)
      • 영어 (2)
        • Diary (0)
        • Toast Masters (2)
      • 메모 (13)
      • 설치 메뉴얼 (30)
      • Java (178)
      • MySQL (60)
      • JSP (67)
      • Springboot (46)
      • HTML,CSS, JS (71)
        • HTML (8)
        • CSS (12)
        • JavaScript (37)
        • HTML&CSS 스터디 (13)
      • C++ (7)
      • Linux (7)
      • JPA (34)
      • Kotlin (2)
      • Flutter (42)
      • Error Note (39)
      • 디자인 패턴 (12)
      • 디지털논리회로 (4)
      • 데이터베이스 시스템 (8)
      • 알고리즘 (7)
      • 운영체제 (3)
      • 이산수학 (3)
      • 인공지능 (1)
      • 자료 구조 (14)
        • 기본 개념 (14)
        • 자료구조 스터디 (0)
      • 💡My project (76)
        • 팩맨 : Java Swing 게임 제작 프로젝트 (6)
        • 네이트톡 : Java 소켓 통신 프로젝트 (4)
        • 포켓옥션 : HikariCP&JDBC CRUD 프.. (3)
        • 이지 부산 : BDIA-Devton 2024 프로.. (20)
        • 그린 유니버시티 : JSP를 사용한 학사관리 프로.. (1)
        • 애드 포커 : 웹 소켓과 Spring을 사용한 카.. (1)
        • 셸위 : 게임 친구 매칭 사이트 (21)
        • 다모아 : 개발자 중개 플랫폼 (20)
      • 📗스터디 (13)
        • CNN : 웹개발 스터디 (10)
        • Node&React로 유튜브 사이트 만들기 (3)
      • 📙독서 및 강연 기록 (36)
        • 강연 (14)
        • 독서 (22)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [CSS] 1. 스타일이란?
        2024년 04월 23일
        • Song hyun
        • 작성자
        • 2024.04.23.오전10:58
        728x90
        반응형

        [CSS] 1. 스타일이란?

         

        1. 스타일이란?

        (1) 스타일(style): HTML문서에서 사용하는 글꼴, 색상, 정렬 등 각 요소들의 배치와 문서의 외형을 결정짓는 내용이다. (2) 스타일 시트(style sheet): 스타일을 관리하기 쉽게 한 곳에 모아둔 것이다.

        (3) 왜 스타일을 사용하나?:

        -문서의 내용과 관계 없이 디자인만 바꿀 수 있다. (내용과 디자인의 분리)

        -다양한 기기에 맞춰 변하는 문서를 만들 수 있다.

         

         

        2. 스타일의 형식

        스타일 형식: p {text-align: center;} (선택자+스타일 속성+속성값)

        -선택자: { } 사이에 정의한 스타일 규칙이 적용될 대상을 말한다.

        -속성과 속성 값: '속성 : 속성 값' 의 형태로 함께 표시한다.

        -스타일 주석: /* 주석 내용 */

         

        3. 스타일의 종류

        (1) 내부 스타일 시트: 사용할 스타일을 문서 안에 정리한 것. (<style></style> 사이에 작성한다.)

        (2) 외부 스타일 시트: 여러 웹 문서에서 사용할 스타일을 별도 문서에 따로 저장, 꺼내와 사용한다. (<link>태그를 이용해 외부 스타일 시트를 연결한다.

        (3)인라인 스타일: -스타일 시트를 사용하지 않고, 스타일을 적용할 대상에 직접 표시한다. -스타일을 적용하고 싶은 태그에 style 속성을 사용해 style="속성: 속성 값;"형태로 스타일을 적용한다.

        728x90
        반응형

        'HTML,CSS, JS > CSS' 카테고리의 다른 글

        [CSS] 6. flex-wrap  (0) 2024.07.02
        [CSS] 5. Flex-direction 속성  (0) 2024.07.01
        [CSS] 4. Flexbox  (0) 2024.07.01
        [CSS] 3. 박스 모델  (0) 2024.07.01
        [CSS] 2. 주요 선택자와 캐스캐이딩의 개념  (0) 2024.04.24
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
      • [CSS] 1. 스타일이란?
      • 1. 스타일이란?
      • 2. 스타일의 형식
      • 3. 스타일의 종류
      • 안녕하세요
      • 감사해요
      • 잘있어요

      티스토리툴바

      단축키

      내 블로그

      내 블로그 - 관리자 홈 전환
      Q
      Q
      새 글 쓰기
      W
      W

      블로그 게시글

      글 수정 (권한 있는 경우)
      E
      E
      댓글 영역으로 이동
      C
      C

      모든 영역

      이 페이지의 URL 복사
      S
      S
      맨 위로 이동
      T
      T
      티스토리 홈 이동
      H
      H
      단축키 안내
      Shift + /
      ⇧ + /

      * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.