스터디/front

Do It! 인터랙티브 웹 페이지 만들기 | Chapter03 정리 (2)

ㅈㅣ니 2023. 10. 10. 19:08

웹 페이지의 배경

배경색

background-color 속성

속성명 속성값 설명
background-color 영문명 배경색을 영어 색상명으로 지정
rgb(0, 0, 0) 배경색을 RGB 표기법으로 지정
#000000 배경색을 16진수 표기법으로 지정

 

배경 이미지
속성명 속성값 설명
background-image url(이미지 경로) 배경 이미지 삽입
background-repeat repeat, repeat-x, repeat-y, no-repeat 배경 이미지 반복
background-position 가로축, 세로축 배경 이미지 위치 지정
background-size contain, cover 배경 이미지 크기 지정
background-attachment fixed 배경 이미지 고정

<html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style04.css">
</head>
<body>
    <section></section>
</body>
</html>

<css>

section {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    background-repeat: no-repeat;
    background-position: center center;     /* 가로축 세로축 중앙 */
    background-size: cover;
   
}

 

웹 페이지의 레이아웃 구성

float -  블록 요소 좌우로 배치
속성명 속성값 설명
float left 요소를 띄워서 왼쪽에 배치
right 요소를 띄워서 오른쪽에 배치

See the Pen Untitled by yejin (@geniest) on CodePen.

.wrap 에 가상 선택자 ::after 를 주고, content 에 빈 문자를 삽입하여 block 속성으로 만들어주고, clear:both 를 적용하면

높잇값을 줄 수 있다. (float 는 높잇값 인식 할 수 없음)

 

position - 요소를 자유롭게 배치
속성명 속성값 설명
position relative 현재 위치값을 기준으로 상대 위치 지정
absolute  부모 요소의 특정 구간을 기준으로 절대 위치 지정
fixed 웹 브라우저 기준으로 절대 위치 지정

 

object-fit - 콘텐츠를 특정 영역에 채우기
속성명 속성값 설명
object-fit fill 요소의 비율을 무시하고 가득 채움
cover 비율 유지하면서 여백 없이 가득 채움 
contain 비율 유지하면서 콘텐츠가 잘리지 않게 가득 채움

<html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style07.css">
</head>
<body>
    <div class="box1">
        <img src="img/dog.jpg" alt="강아지">
    </div>
    <div class="box2">
        <img src="img/dog.jpg" alt="강아지">
    </div>
    <div class="box3">
        <img src="img/dog.jpg" alt="강아지">
    </div>
</body>
</html>

<css>

div{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    float: left;
    margin: 50px;
}
div img {
    width: 100%;
    height: 100%;
}
.box1 img {
    object-fit: fill;

}
.box2 img {
    object-fit: cover;

}
.box3 img {
    object-fit: contain;
}

-> 결과

 

z-index - 겹쳐 있는 요소의 z축 순서 지정
속성명 속성값 설명
z-index 순서값 요소에  z축의 순서를 지정. 값이 큰 요소가 위로 올라간다.

See the Pen z-index by yejin (@geniest) on CodePen.

그래픽 효과

그래픽 효과에는 다양한 것이 있는데, 그 중 

border-radius 와 filter를 사용해보겠다. 

예제 index09.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style09.css">
</head>
<body>
    <div>
        <img src="img/dog.jpg" alt="강아지">
        <img src="img/dog.jpg" alt="강아지">
        <img src="img/dog.jpg" alt="강아지">
        <img src="img/dog.jpg" alt="강아지">
        <img src="img/dog.jpg" alt="강아지">
        <img src="img/dog.jpg" alt="강아지">
        <img src="img/dog.jpg" alt="강아지">
        <img src="img/dog.jpg" alt="강아지">
        <img src="img/dog.jpg" alt="강아지">
    </div>
</body>
</html>
div {
    width: 650px;
    margin: 100px auto;
    border: 1px solid black;
    padding: 10px;
    border-radius: 30px;
}
div img {
    width: 200px;
    margin: 6px;
}
div img:nth-of-type(2){
    filter: blur(3px);
}
div img:nth-of-type(3){
    filter: brightness(0.5)
}
div img:nth-of-type(4){
    filter: contrast(150%);
}
div img:nth-of-type(5){
    filter: hue-rotate(180deg)
}
div img:nth-of-type(6){
    filter: grayscale(100%);
}
div img:nth-of-type(7){
    filter: invert(100%);
}
div img:nth-of-type(8){
    filter: saturate(0.5);
}
div img:nth-of-type(9){
    filter: sepia(100%);
}

 

반응형