ENG 데브로그

    ENG 데브로그
    이앤지
    Angie's GitHub Contribution Graph
    Loading data ...

    1)

    1. CSS

    CSS는 Cascading Style Sheet의 약자로, HTML로 작성된 정보를 꾸며주는 언어입니다.

    Point I
    CSS 구성 요소

    선택자 { 속성 : 속성값; }
    • 선택자: 디자인을 적용할 HTML 영역
    • 속성: 어떤 디자인을 적용할지 정의
    • 속성값: 어떤 역할을 수행할지 구체적으로 명령

    Point II
    CSS 속성 (Property)

    		h1 {
    		    font-size: 20px; /* 폰트 사이즈 */
    		    font-family: sans-serif; /* 글꼴 */
    		    color: blue; /*폰트 색깔 */
    		    background-color: yellow; /* 배경색 */
    		    text-align: center; /* 텍스트 정렬 */
    		}

    Point III
    CSS 연동 방법

    1. Inline Style Sheet: 태그 안에 직접 원하는 스타일 적용
    <h1 style="color: red;"> coding 101 </h1>

     

    1. Internal Style Sheet: <style> 태그 안에 넣기
    		<head>
    		    <style>
    		        h1 { background-color: yellow;}
    		    </style>
    		</head>

     

    1. External Style Sheet: <link> 태그로 불러오기
    		<head>
    		    <link rel="stylesheet" href="style.css">
    		</head>
    • html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬움

     

     

    2. CSS 선택자

    Point I
    Type Selector: 특정 태그에 스타일 적용

    		<!-- <h2> Type Hello World </h2> -->
    		 
    		<style>
    		    h2 { color: red; }
    		</style>

    Point II
    Class Selector: 클래스 이름으로 특정 위치에 스타일 적용

    		<!-- <h2 class="coding"> Class Hello World </h2> -->
    		<style>
    		    .coding { color: blue; }
    		</style>

    Point III
    ID Selector: ID를 이용해 스타일 적용

    		<!-- <h2 id="coding"> ID Hellow World </h2> -->
    		<style>
    		    #coding { color: green; }
    		</style>

     

     

    3. 부모 자식 관계

    • <header>와 <h1> <p>: 부모 자식 관계
    • <h1>과 <p>: 형제 관계
    • 원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기

     

     

    2)

    1. 캐스케이딩

    CSS의 우선순위를 결정하는 세 가지 요소

    1. 순서
    나중에 적용한 속성값의 우선순위가 높음

    		/* <p>Hello World</p> */
    		 
    		p { color: red; }
    		p { color: blue; ]

    2. 디테일
    더 구체적으로 작성된 선택자의 우선순위가 높음

    		header p {color: red; }
    		p { color: blue; }

    3. 선택자
    style > id > class > type 순으로 우선순위가 높음

    		<h3 style="color: pink" id="color" class="color"> color </h3>
    		 
    		#color { color: blue; }
    		.color { color: red; }
    		h3 {color: green; }

     

     

    2. CSS 주요 속성

    Point I
    width, height

    		<p class="paragraph"> 프로그래밍을 배워봐요! </p>
    		 
    		.paragraph { width: 500px, height: 500 px; }
    • .width 속성: 선택한 요소의 넓이를 설정
    • .height 속성: 선택한 요소의 높이를 설정
    • 고정값은 px, 가변값은 %로 표기

    Point II
    font

    		<p class="paragraph"> 즐거운 웹프로그래밍! </p>
    		 
    		.paragraph {
    		    font-size: 50px; /* 글자 크기 */
    		    font-family: Arial, sans-serif; /* 글꼴 */
    		    font-style: italic; /* 글자 기울기 */
    		    font-weight: bold; /* 글자 두께 */
    • .font-family: 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용. sans-serif는 모든 브라우저에서 지원 가능하기 때문에 마지막에 작성하는 디폴트 값.
    • .font-weight: 100-900 사이의 숫자를 입력할 수도 있음.

    Point III
    border

    		<p class="paragraph"> 즐거운 웹프로그래밍! </p>
    		 
    		.paragraph {
    		    width: 500px; 
    		    height: 500px; 
    		    border-style: solid;
    		    border-width: 10px;
    		    border-color: red;
    		    
    		    /* border: solid 10px red; */
    • .border-style: 실선은 solid, 점선은 dotted로 표기
    • 주석과 같이 한 줄에 이어 쓸 수도 있음. 이때, 쉼표는 작성하지 않고 띄어쓰기만 함 (순서 상관 X)

    Point IV
    background

    		<p class="paragraph"> 즐거운 웹프로그래밍! </p>
    		 
    		.paragraph {
    		    background-color: yellow;
    		    background-image: url(이미지 경로);
    		    background-repeat: no-repeat;
    		    background-position: left;
    		    
    		    /* background: yellow url(이미지 경로) no-repeat left; */
    • .background-repeat: x축으로 반복은 repeat-x, y축으로 반복은 repeat-y, 반복하지 않은 경우 no-repeat으로 표기
    • .background-position: 공간 안에서 이미지의 좌표 변경 (top, bottom, center, left, right 등)
    • 주석과 같이 한 줄에 이어 쓸 수도 있음. 이때, 쉼표는 작성하지 않고 띄어쓰기만 함 (순서 상관 X)
    저작자표시 비영리 동일조건

    'STUDY > web' 카테고리의 다른 글

    레이아웃 css  (0) 2022.11.29
    html 복습  (0) 2022.11.29
    비트북스 프로젝트 발표 영상  (0) 2022.04.08
    css selector  (0) 2022.03.21
    css 우선순위 정리  (0) 2022.03.21

    + Recent posts

    티스토리툴바