웹사이트의 디자인 Ⅱ

※2022 AI/SW 온라인 실무 교육 (elice.io)※

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)