미새문지

Front End. Day06 CSS(3) 본문

웹 프론트엔드

Front End. Day06 CSS(3)

문미새 2022. 4. 26. 16:31
728x90

6일차입니다. 벌써 강의 들은지 3주가 지났습니다. ㄷㄷ

이제 막 배워가는 단계여서 다른 언어와 명령어가 겹쳐 헷갈리기도 하더라구요. 정확히 이해하고 사용해야 할 것 같습니다

 

< CSS의 배경에 사용하는 태그 >

 

 background-color
        HTML 요소의 배경색 설정

        ex) background-color: royalblue;


 background-image
        HTML 요소의 배경으로 나타난 배경 이미지를 선택
        배경 이미지는 기본 설정으로 바둑판 형식으로 반복되어 나타남
        ex)  background-image: url(./img/건물들.jpg);

 

 background-repeat
        배경이미지를 수평이나 수직방향으로 반복하도록 설정
        (repeat, repeat-x, repeat-y, no-repeat(반복안함))
        ex) background-repeat: no-repeat;


 background-position
        반복되지 않는 배경 이미지의 상대 위치를 설정
        %나 px를 사용하여 상대위치를 정할 수 있음
        상대위치를 정하는 기준은 해당 요소의 왼쪽 상단

        ex) background-position: right bottom;

 

 background-attachment
        위치가 설정된 배경이미지를 원하는 위치에 고정
        고정된 배경 이미지는 스크롤과 무관하게 화면 위치에서 이동되지 않음(fixed)

        ex)  background-attachment: fixed;

 

 background-size
        배경 크기를 설정
        px, %을 사용

        ex) background-size: cover;

 

-----------------------------------------------------------------------------------------------------------------------

[ 특별한 값 ]


 cover
            배경이미지의 가로 세로 모두 요소보다는 크다는 조건 하에
            가능한 이미지를 작게 설정 = 배경 이미지의 크기는 요소의 크기보다
            항상 크거나 같음

            ex) div크기가 300x300이라면 300x300보다 크다는 조건하에
            꽉 채워줄 수 있다
                =>이미지가 요소보다 크면 이미지 일부만 보이기 때문 

<div class="bgSizeCover">

 


 contain
            배경 이미지의 가로 세로 모드 요소보다는 작다는 조건 하에
            가능한 이미지를 크게 설정 = 배경이미지의 크기는 요소의 크기보다
            항상 작거나 같음 

<div class="bgSizeContain">

 

--------------------------------------------------------------------------------------------------------------------------


 background 축약
           background: 경로, 반복여부, 위치, 속성(fixed) / 사이즈

background: url("./img/건물들.jpg") no-repeat fixed;

축약으로 몇줄 작성해야하는걸 한줄로 줄일 수 있어 가독성이 좋아진다.

 

배경에 사용하는 태그는 이정도가 있고 다음은 박스모델입니다.

 

 

박스모델(Box Model)이란?

 

모든 HTML요소는 박스모양으로 구성되어, 박스모델이라고 부릅니다.

박스모델은 HTML요소를 패딩(padding), 테두리(border), 마진(margin), 내용(content)으로 구분합니다.

 

1. 패딩(padding) : 내용과 테두리 사이의 간격으로 패딩은 눈에 안보입니다.

2. 테두리(border) : 내용과 패딩 주변을 감싸는 테두리입니다.

3. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격이며 마진도 눈에 보이지 않습니다.

4. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실직적인 내용 부분입니다.

 

 

패딩은 위치 작성순서가 있는데

 - CSS속성: a b c d (위, 오른쪽, 아래, 왼쪽 ) - 시계방향
 - CSS속성: a b c (위, 아래, 양옆)
 - CSS속성: a b(위/아래, 양옆) // 0 auto
 - CSS속성: a (전방향)


 margin/padding -top, rigth, bottom, left - 방향 : a
    ex) margin-left:10px;

으로 작성을 해야합니다.

 

 

그리고 테두리는 길이(width), 속성(style), 색상(color)로 작성합니다.

   ex) border: 3px solid/dotted color #000;

 

 border-style:, border-color:, border-width: --> 이런식으로 각자 부여하는 것도 가능합니다.

 

 

 

예시)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>패딩</title>
    <style>
        p{ border: 3px solid #000; }
        
        #ex1{padding: 10px;}  //패딩 10픽셀

        #ex2{padding: 20px;}  //패딩 20픽셀

        #ex3{margin: 20px;}  //마진 20픽셀

        #ex4{margin-top: 30px;}  //마진 위로 30픽셀

        #ex5{margin-left: 30px;}  //마진 왼쪽으로 30픽셀
    </style>
</head>
<body>
    <p id="ex1">Lorem ipsum, dolor sit amet<span> consectetur adipisicing elit.</span> Tenetur ipsam quae inventore molestias natus, ullam laborum ducimus temporibus explicabo, mollitia perferendis doloremque cumque molestiae nesciunt quasi, eaque dicta beatae commodi.</p>
    <p id="ex2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ex nulla sequi enim ut sapiente ipsam eum laboriosam cum nostrum suscipit a ab error sunt voluptas perferendis quas quaerat earum!</p>
    <p id="ex3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ea amet ipsa! Adipisci alias quas commodi doloremque accusantium excepturi iure, at vero numquam est, facere soluta porro, reprehenderit ducimus dolor?</p>
    <p id="ex4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur maxime ea, delectus, dolore sequi quae repudiandae itaque aliquam vel quas officiis eligendi porro odio similique amet consequuntur ut quis magnam?</p>
    <p id="ex5">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis ipsa modi alias minus sed debitis magnam ipsam? Illum enim in, facilis dignissimos velit ratione, mollitia sunt est, alias repudiandae vitae?</p>
</body>
</html>

 

 

결과)

각 태그에 맞게 설정된 모습입니다. 박스모델의 태그를 이용해 원하는 대로 맞추는거죠

 

6일차는 여기까지입니다. 점점 홈페이지를 꾸밀 수 있는 태그들이 나오기 시작하네요 .

다음 7일차 강의에서는 테두리 효과, 디스플레이구역설정 등 세부적으로 들어갈 것 같습니다.

 

 

728x90
저작자표시 비영리 변경금지

'웹 프론트엔드' 카테고리의 다른 글

Front End. Day08 CSS(5)  (1) 2022.05.03
Front End. Day07 CSS(4)  (1) 2022.05.02
Front End. Day05 CSS(2)  (1) 2022.04.25
Front End. Day04 CSS  (1) 2022.04.19
Front End. Day03 HTML(2)  (1) 2022.04.18
'웹 프론트엔드' Related Articles more