1.  글꼴 관련 스타일

font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

 

🍒  font-family : 웹 문서에서 사용할 글꼴을 지정

        ➡️  2개 이상 지정할 때 이름 사이에 쉼표(,)를 넣어 구분

 

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

 

🍒  font-size : 글자 크기 지정. 단위는 px(픽셀) 이나 pt(포인트) 등으로 지정할 수 있고 백분율도 가능

 

키워드 사용하여 글자 크기 지정
xx-small < x-small < small < medium < large < x-large < xx-large

 

단위 사용하여 글자 크기 지정
1em = 16px, 12pt
em   : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
rem  :  문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
ex     :  해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정
px     :  모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정
pt      :  포인트라고 하며, 일반 문서에 많이 사용

 

font-style: normal | italic | oblique

 

🍒  font-style : 글자를 이탤릭체로 표시할 때 사용

 

font-weight: normal | bold | bolder | lighter | 100 | ... | 900

 

🍒  font-weight : 글자 굵기를 지정. 100~900사이에서 400은 normal, 700은 bold에 해당

 

 

2.  웹 폰트 사용

 

웹 폰트 업로드하고 사용하기

 

  🍒  컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)이고 파일 확장자는 *.ttf

          ▶️  파일 크기가 커서 웹에서 사용하기엔 적절하지 x

  🍒  웹에 적합한 글꼴 : EOT embedded open type / WOFF web open font format 

  

@font-face {
    font-family: <글꼴 이름>; <!-- 글꼴 파일 이름과 같은 이름으로 사용 -->
    src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ....]; <!-- 글꼴 파일의 경로 -->
    }

 

    ⚡️  local()문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인해야 한다.

 

@import 방식
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

        h1 {
                font-family: "Nanum Pen Script", cursive;
                font-weight: 400;
                font-style: normal;
            }

    </style>
</head>
<body>

<h1>안녕하세요~</h1>

</body>

 

link 방식

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        /* link 방식 적용. Nanum Brush Script 폰트 적용 */
        * {
            padding: 0;
            margin: 0;
        }

        p {
            margin: 40px;
        }

        .test {
            font-family: "Nanum Pen Script", cursive;
            font-weight: 400;
            font-style: normal;
        }

    </style>
</head>

 

 

3.  텍스트 관련 스타일

 

1) 글자색 지정하는 color 속성

 

color: <색상>

 

hsl과 hsla

   

    · hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말

    · hsla는 hsl에 alpha(불투명도)를 추가한 것을 의미

 

<style>
  h1 { 
    color:#0000ff;   /* 16진수 표기법 */
  } 
  p {
    color:green;  /* 색상 이름 */
  }
  .accent {
    color:hsl(0, 100%, 50%);  /* hsl 표기법 */
    font-weight:bold;
  }
</style>

 

 

rgb와 rgba로 표현하는 방법

 

     ·  rgb는 red, green, blue의 줄임말

     ·  하나도 섞이지 않았을 때는 0으로 표시, 가득 섞였을 때는 255로 표시

     ·  rgba에서 맨 끝의 a(alpha)는 불투명도 값을 나타내며 0~1의 값 중에서 사용할 수 있다.

<!--파란색 지정 -->
h1 { color: rgb(0, 0, 255); }

 

 

2) 텍스트 정렬하는 text-align 속성

 

text-align: start | end | left | right | center | justify | match-parent

 

종류 설명
start 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬
end 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬
left 왼쪽에 맞추어 문단 정렬
right 오른쪽에 맞추어 문단 정렬
center 가운데에 맞추어 문단 정렬
justify 양쪽에 맞추어 문단 정렬
match-parent 부모 요소를 따라 문단 정렬

🍒  왼쪽 정렬이 기본값. 양쪽 정렬과의 차이는 왼쪽 정렬에서는 오른쪽에 여백이 생기지만 양쪽 정렬에서는 여백이 없다.

 

 

4)  줄 간격을 조절하는 line-height 속성

 

🍒   line-height 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있다.

🍒   텍스트를 세로 가운데 정렬할 때 height 값과 똑같이 추가하면 된다.

 

p { font-size: 12px; line-height: 24px; }
p { font-size: 12px; line-height: 2.0;; }
p { font-size: 12px; line-height: 200%; }

 

 

5) 텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

 

🍒  텍스트에 밑줄을 긋거나 취소선을 표시하는 속성

       ex. 하이퍼링크 적용하면 기본적으로 밑줄이 생김

<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>

 

 

6) 텍스트에 그림자 효과를 추가하는 text-shadow 속성

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

 

<가로 거리>  :  텍스트로부터 그림자까지의 가로 거리로 필수 속성.
                           양수값은 오른쪽, 음수값은 왼쪽
<세로 거리>  :  텍스트로부터 그림자까지의 세로 거리로 필수 속성.
                           양수값은 아래쪽, 음수값은 위쪽
<번짐 정도>  :  그림자가 번지는 정도. 양수값은 모든 방향으로 퍼짐, 음수값은 모든 방향으로 축소
<색상>          :  그림자 색상을 지정

 

 

7) 텍스트의 대소 문자를 변환하는 text-transform 속성

 

👾  capitalize : 첫 번째 글자를 대문자로 변환
👾  uppercase : 모든 글자를 대문자로 변환
👾  lowercase  : 모든 글자를 소문자로 변환
👾  full-with     : 가능한 한 모든 문자를 전각 문자로 변환

 

 

8) 글자 간격을 조절하는 letter-spacing, word-spacing 속성

 

🍒  letter-spacing 속성은 글자와 글자 사이의 간격을 조절

🍒  word-spacing 속성은 단어와 단어 사이 간격을 조절

 

<head>
  <style>  
    p {
      font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      font-size:80px;
      text-shadow:3px 3px 1px #ccc;  /* 오른쪽 아래로 파란색 그림자 */
    }
    .spacing1 {
      letter-spacing:0.2em;  /* 글자 간격 0.2em */
    }
    .spacing2 {
      letter-spacing:0.5em;  /* 글자 간격 0.5em */
    }      
  </style>
</head>
<body>
  <p>CSS</p> 
  <p class="spacing1">CSS</p>
  <p class="spacing2">CSS</p>
</body>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

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

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

[CSS] position 속성, z-index  (1) 2024.03.25
[CSS] 목록 스타일, 표 스타일  (1) 2024.03.23
[CSS] 배경 이미지 지정과 속성  (0) 2024.03.22
[CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소  (0) 2024.03.21
[CSS] 수직 중앙 정렬 방법, overflow와 scroll  (0) 2024.03.21

 

1.  폼 form 삽입하기

 

🐰  form : 여러 입력 양식을 그룹화하고 전송

🐰  폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동

        ➡️  텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만,

             폼에 입력한 사용자 정보는 ASP나 PHP, JSP같은 서버 프로그래밍을 이용해 처리

 

    🥕  form을 만들고 사용자 화면을 구성하는 영역은 프론트엔드 영역에서 담당
    🥕  form을 통해 전달 받은 데이터를 가공하는 일은 벡엔드 영역에서 처리

 

 

1) 폼을 만드는 <form> 태그

<form [속성="속성값"]>여러 폼 요소</form>

 

          💡 폼 태그의 속성

종류 설명
method 폼을 서버로 전송할 때 http 메소드를 지정(=전송방식)

· get : 주소표시줄에 사용자가 입력한 내용이 그대로 표시 - 보안이 위험
· post : 대부분이 사용하는 방식, 내부적으로 보이지 않게 전송
action 특정 주소값이나 파일 위치. 폼 데이터가 전송되는 곳. 
name 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정
target action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함

 

🐰  autocomplete 속성 : 기본값. 자동 완성 기능

        ▶️  입력한 적 있는 값을 한 두글자 정도 입력하면 이전에 입력 내용을 자동으로 보여준다.

<!-- 자동 완성 기능 끄기 -->
<form action="" autocomplete="off">
...
</form>

 

 

2)  폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

<fieldset [속성="속성값"]>
    <legend>그룹 이름</legend>
</fieldset>

 

  fieldset : 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
  legend  : fieldset로 묶은 그룹에 제목을 붙일 수 있음 

 

<body>
  <h1>쇼핑몰 주문하기</h1>
  <form action="">
    <fieldset>
      <legend>상품 선택</legend>
      
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
      
    </fieldset>      
  </form>

 

3) 폼 요소에 레이블을 붙이는 <label> 태그

 

<label>레이블명<input></label>

 

  <label> 태그  : input 태그와 같은 폼 요소에 레이블을 붙일 때 사용
         📍 label이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트
         📍  label 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 인식 

 

<!-- 폼 요소의 id 속성값을 <label>태그의 for 속성에 알려 주는 방법 -->
<label for="id명">레이블명<input id="id명"></label>

 

 

2.  사용자 입력을 위한 input 태그 

🐰  <input> 태그 : 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용

 

1)  <input> 태그의 type 속성

 

종류 설명
text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스 생성
password 비밀번호 입력할 수 있는 필드 생성, 문자를 입력하면 특수문자로 생성
search 검색할 때 입력하는 필드 생성
검색 키워드를 입력할 경우 키워드를 지울 수 있도록 X 표시가 나타남
url url 주소 입력할 수 있는 필드 생성
email email 주소 입력할 수 있는 필드 생성
tel 전화번호를 입력할 수 있는 필드 생성. 모바일에서는 숫자 키보드로 자동 전환.
checkbox 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스 생성
radio 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼 생성
number 숫자를 조절할 수 있는 스핀 박스 생성. 모바일에서는 숫자 키보드로 자동 전환.
[min은 이상, max는 이하, step은 클릭할 때 값]
range 숫자를 조절할 수 있는 슬라이드 막대 생성
date 사용자 지역을 기준으로 날짜(연, 월, 일) 생성
month 사용자 지역을 기준으로 날짜(연, 월) 생성
week 사용자 지역을 기준으로 날짜(연, 주) 생성
time 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초) 생성
datetime 국제 표준시로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 생성
datetime-local 사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초) 생성
submit 전송 버튼 생성
reset 리셋 버튼 생성
image submit 버튼 대신 사용할 이미지를 생성
button 일반 버튼 생성
file 파일을 첨부할 수 있는 버튼 생성
hidden 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필드 생성
color 색상 선택 양식을 생성. 선택 시 색상 선택 화면이 나타나면 색상을 선택 할 수 있음. 
<input type= "속성" name= "이름(서버에서 사용하는 이름) 필수" id="css나 자바스크립트에서 제어할 때 사용">
<!-- 이미지 버튼 -->
<input type="image" src="이미지 경로" alt="대체 텍스트">

 

💡  텍스트, 비밀번호 필드에서 사용하는 주요 속성

종류 설명
size 텍스트와 비밀번호 필드 길이 지정
= 화면에 몇 글자가 보이도록 할 것인지 지정
value 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용
maxlength 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수 지정

 

💡  체크 박스, 라디오 버튼에서 사용하는 속성

종류 설명
value 선택한 체크 박스나 라디오 버튼을 서버에 알려 줄 때 넘겨줄 값을 지정.
영문이거나 숫자여야 하며 필수 속성.
checked 체크 박스나 라디오 버튼의 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용.

 

💡  number, range에서 사용하는 속성

속성 설명
min 필드에 입력할 수 있는 최솟값을 지정
기본 최솟값은 0
max 필드에 입력할 수 있는 최댓값을 지정
기본 최댓값은 100
step 숫자 간격을 지정. 기본값은 1
value 필드에 표시할 초깃값

 

💡  날짜, 시간 범위를 지정하는 속성

종류 설명
min 날짜나 시간의 범위를 제한.
min은 범위의 시작 날짜나 시간, max는 범위의 마지막 날짜나 시간
max
step 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기 지정
value 기본적으로 표시할 날짜나 시간 지정

 

 

type="text", type="hidden", type="submit"
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type=text]{
        width: 200px; height: 16px; border: 1px solid #999;
        }
    </style>
</head>
<body>
    <form name="frmPost" action="action.php" method="post">
        <label for="memberID">아이디</label>
        <input type="hidden" name="loginType" value="general">
        <input type="text" name="memberID" id="memberID" value="1" maxlength="4">

        <input type="submit" value="전송">
    </form>
</body>

전송버튼 눌렀을 때 결과

 

 

type="password", type="search"
<body>

    <form action="action.php" method="post">
        <label for="mId">아이디</label>
        <input type="text" name="memberId" id="mId" />

        <label for="pwd">비밀번호</label>
        <input type="password" name="password" id="pwd">

        <input type="reset" />
        <input type="submit" />
    </form>
    <br><br>
    <form action="action.php" method="get">
        <input type="search" name="search">
        <input type="submit" value="검색" />
    </form>
</body>

 

 

type="checkbox"

💡 php에서는 checkbox의 name을 배열처리해야 함 ▶️ name="hobby[]"
     자바 계열에서는 배열처리를 하지 않음 ▶️ name="hobby"
<body>
    <form name="frmPost" action="action.php" method="post">
        <h4>취미</h4>
        <!-- for에 해당 태그의 아이디 값을 지정하면 label 클릭 시에 해당 체크박스 선택, 해제 됨 -->
        <input name="hobby[]" type="checkbox" value="sports" id="sportsId">
        <label for="sportsId">스포츠</label>

        <!-- label 태그로 전체를 감싸도 동일한 기능 -->
        <label>
            <input name="hobby[]" type="checkbox" value="game">
            게임</label>

        <!-- 분리해서 사용하면 선택, 해제 기능 안 됨. -->
        <input name="hobby[]" type="checkbox" value="cook">
        <label>요리</label>
        <input type="submit" value="전송">
    </form>
</body>

 

type="radio"
    
📍 짧은 항목에 대한 선택이 필요할 때 주로 활용되며, 반드시 한 가지 항목을 선택해야 할 때 사용
📍 name 값을 동일하게 작성해야 같은 그룹으로 인식

checked="checked"는 방문자의 편의를 돕기 위해 미리 항목에 체크된 상태를 보여주는 옵션

 

<body>
<form action="action.php" method="post">
    <h4>직업</h4>

    <input type="radio" name="job" value="design" id="design" checked="checked">
    <label for="design">UI/UX 디자이너</label>

    <input type="radio" name="job" value="front_end dev" id="front_end">
    <label for="front_end">프런트엔드 개발자</label>

    <input type="radio" name="job" value="back_end dev" id="back_end">
    <label for="back_end">백엔드 개발자</label>

    <input type="submit" value="전송">
</form>

</body>

 

 type="color" 색상값 선택하기
<body>
<form name="frmPost" action="action.php" metho="post">
    <label for="color">색상 선택</label>
    <input type="color" name="color" id="color">

    <input type="submit" value="전송">
</form>
</body>

 

type="date",  type="month",  type="week",  type="datetime"
<body>
<form name="frmPost" action="action.php" method="post">
    <label for="date2">날짜 선택</label>
    <input type="date" name="date" id="date2">

    <br><br>
    <!-- type="month"  년/월에 대한 정보를 달력을 통해 선택 -->
    <input type="month" name="month">

    <br><br>
    <!-- type="week" 년/주에 대한 정보를 달력을 통해 선택 -->
    <input type="week" name="week">
    <input type="submit" value="전송">
    
    <br><br>
    <!-- type="datetime" 날짜, 시간을 지정. -->
    <label>datetime <input type="datetime-local" name="datetime-local"/></label>
</form>
</body>

 

type="search",  type="url",  type="email",  type="tel",  type="number",  type="range"
<head>
    <style>
        label {
            display: block;
            padding: 10px;
        }
    </style>
</head>
<body>
<form name="etc" action="action.php" method="post">
    <!-- type="search"-->
    <label>검색<input type="search" name="search" /></label>

    <!-- type="url" 자동으로 주소 양식 검사 -->
    <label>url <input type="url" name="url"/></label>

    <!-- type="email"-->
    <!-- required : submit 전 반드시 채워져 있어야 하는 입력 필드를 명시 -->
    <label>email <input type="email" name="email" required></label>

    <!-- type="tel" -->
    <label>tel <input type="tel" name="tel"/></label>

    <!-- type="number" -->
    <label>number <input type="number" name="number" min="1" max="100" step="5"/></label>

    <!-- type="range" value는 초기값 -->
    <label>range <input type="range" name="range" min="1" max="5" value="3"/></label>


    <input type="reset"/>
    <input type="submit"/>
</form>

</body>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

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

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

[HTML] 표 만들기, 표 구조와 구성요소  (0) 2024.03.25
[HTML] input 태그 주요 속성, 폼에서 사용하는 여러가지 태그  (1) 2024.03.23
[HTML] 웹 문서 초기화 스타일, 시맨틱 코드  (0) 2024.03.22
[HTML] 이미지 태그, 하이퍼링크 삽입  (0) 2024.03.19
[HTML] 정의 및 기본구조, 텍스트 입력 태그, 순서 목록 태그  (2) 2024.03.18

 

1.  배경색과 배경 범위 지정

 

배경색 지정 
background-color: #999;
background-color: yellow;

 

배경색 적용 범위 지정
background-clip: border-box   /* 테두리 배경 까지 지정 */
background-clip: padding-box  /* 테두리를 뺀 패딩 범위까지 지정 */
background-clip: content-box  /* 콘텐츠에만 배경 지정 */

 

 

2.  배경 이미지 지정

 

1)  배경 이미지 속성


🚀  배경 이미지 속성은 특정 태그의 배경 이미지 또는 배경 색상을 지정하는 스타일 속성

 

  background-image : url(이미지 경로) / 배경 이미지 경로

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body { /* 배경 이미지를 적용하는 기본 방식 */
            background-image: url("img/cat_bg.png");
            background-color: cadetblue;
            /* background: cadetblue url("img/cat_bg.png") */
        }
    </style>
</head>

 

🚀  배경 이미지를 2개 이상 적용하는 경우 왼쪽에 위치한 이미지가 앞으로 나온다

<head>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    body { /* 배경 이미지를 2개 이상 적용하는 기본 방식 */
        background-image: url("img/cat_bg.png'), url("img/land.png");
    }
    </style>
</head>
<body>

 

 

 

2)  background-size 속성
        

🚀  배경 이미지에 대한 size를 지정하기 위한 값

 

💡 background-size : 100%, cover, contain, px값              < 배경 이미지 크기 >

a. auto       : 기본 값. 원래 배경 이미지 크기만큼 표시
b. contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대,축소 (이미지 잘리는 부분이 없다 )
c. cover     : 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소 (이미지 잘리는 부분이 생길 수 있다 )
d. 크기         : 너비와 높이를 지정
e. 백분율      : 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정

 

💡 background-repeat : repeat, repeat-x, repeat-y, no-repeat   < 배경 이미지 반복 >

a. repeat : 기본값. 브라우저 화면에 가득 찰 때까지 가로와 세로 반복
b. repeat-x : 브라우저 화면 너비에 가득 찰 때까지 가로로 반복
c. repeat-y : 브라우저 화면 너비에 가득 찰 때까지 세로로 반복
d. no-repeat : 한 번만 표시하고 반복하지 않는다

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("img/art.jpg");
            background-size:  100%;
            /* 배경 이미지 사이즈 100%는 (body 태그에 적용한 경우) 브라우저의 가로 길이를 기준으로 100%.
            상대 크기라서 브라우저 폭을 줄이면 같이 줄어듦.
             */
            background-repeat: no-repeat;
        }
    </style>
</head>

 

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("img/art.jpg");
            background-size:500px;
            background-repeat: repeat-x;
        }
    </style>
</head>

 

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("img/art.jpg");
            background-size:  100% 500px;
            /* 배경 이미지 크기 100%는 브라우저 가로 길이를 기준으로 100% */
            /* 100%(가로 크기), 500px(세로 크기) */
            background-repeat: no-repeat;
        }
    </style>
</head>

 

 

3) background-attachment 속성

 

🚀  배경 이미지를 웹 브라우저에서 열고 스크롤 막대를 위아래로 조절하면서 배경 이미지도 함께 이동하는 경우가 있다

       ➡️ 이 속성을 사용하면 배경 이미지를 고정할 수 있음  

 

💡 background-attachment : fixed, scroll    < 스크롤에 따른 조정 >
        
a. scroll  : 기본값. 스크롤 바의 움직임에 따라 배경 이미지도 움직임
b. fixed  : 브라우저 화면에서 스크롤 바를 움직이더라도 배경 이미지는 고정되어 있음

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("img/art.jpg");
            background-size:  100%;
            background-repeat: no-repeat;
            height: 3000px; /* 브라우저 화면에 세로 스크롤 바를 생성시키기 위해 높이값 적용 */
            background-attachment: fixed; /* 브라우저 화면에서 스크롤 바를 움직이더라도 배경 이미지는 고정되어 있음 */
        }
    </style>
</head>

 

 

4) background-position 속성

 

🚀  배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다

🚀  속성 값 하나만 지정한다면 수평 위칫값으로 간주

background-position. : <수평 위치> <수직 위치>;
수평 위치 : left | center | right | <백분율> | <길이 값>
수직 위치 : top | center | bottom | <백분율> | <길이 값>

ex. background-position: 30% 60%;
      ▶️  가로 30% 세로 60% 위치에 배경 이미지의 왼쪽 상단 모서리를 맞춘다.

 

 

5) background-origin 속성

 

🚀  박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수 있다.

 

💡 background-origin: content-box | padding-box | border-box

a.  content-box  :  박스 모델 내용 부분에만 배경 이미지 표시
b.  padding-box :  박스 모델 패딩까지 배경 이미지를 표시. 기본 값.
c.  border-box    :  박스 모델에서 테두리까지 배경 이미지를 표시 

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

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

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

[CSS] 목록 스타일, 표 스타일  (1) 2024.03.23
[CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용  (0) 2024.03.23
[CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소  (0) 2024.03.21
[CSS] 수직 중앙 정렬 방법, overflow와 scroll  (0) 2024.03.21
[CSS] display 속성과 사용 예, float, clear, 여백 조절-[margin, padding]  (0) 2024.03.20

 

웹 문서 제작 시 초기화 스타일
<style>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none; /* 링크 속성 글자 밑줄 없앰 */
    }

    li {
        list-style: none; /* 항목 태그 블릿 아이콘 장식 없앰 */
    }

    img {
        display: block; /* inline 속성을 지니고 있는 img 태그의 오차 간격을 없애기 위한 속성 변경 */
        border: none; /* img 태그의 모든 테두리선은 없음으로 초기화  */
    }

    body {
        font-family: 'Verdana'; /* 글꼴 */
        font-size: 14px; /* 글자 크기 */
        color: black; /* 글자 색상 */
        line-height: 28px; /* 줄 간격 */ }
</style>

1.  시맨틱 태그  semantic-tags

 

👩🏻‍💻  시맨틱 태그 semantic : 이름만 봐도 의미를 알 수 있다는 의미로 사용

👩🏻‍💻  의미 요소를 가진 태그
      - 자신의 컨텐츠를 명확하게 정의
      - 코드의 가독성을 높이고 의미를 명확하게 해주는 장점
      - 컴퓨터의 정보를 이해, 논리적인 추론이 가능한 구조

 

시맨틱 태그 종류

 

1)  <header> 태그 : 헤더 영역을 의미

     - 머리말 의미, 헤더, 로고, 네비게이션, 검색창

     - 주로 맨 위쪽이나 왼쪽에 있으며, 로고를 중심으로 네비게이션 메뉴와 검색 창이 들어간다.

     - 네비게이션 메뉴는 <nav> 태그로 구성

2)  <nav> 태그 : 내비게이션 영역을 나타내는 태그

     - 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.

     - 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드바 안에 포함할 수도 있고, 독립해서 사용 가능

     - <nav> 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있다.

3)  <section> 태그 : 콘텐츠 영역을 나타낸다

    - <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 쓴다.

    -  콘텐츠를 주제별로 묶을 때 사용하며 내부에는 <h1>~<h6> 제목 태그가 함께 사용

    -  태그 안에는 다른 태그를 넣을 수 있음

4)  <article> 태그 : 독립적인 콘텐츠를 담는다

    -  문맥의 흐름 중 콘텐츠를 주제별로 묶을 때 사용

    -  아티클 article의 사전적 의미인 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 넣는다.

         ex.  블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목

    -  문서 안에 <article> 태그를 여러 개 사용할 수 있고, 이 안에 <section> 태그를 넣을 수도 있다.

   

5)  <aside> 태그: 사이드 바 영역을 나타낸다

   -  본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다.

   -  필요할 경우에만 사용 

   -  광고나 일반적인 링크 모음처럼 문서의 메인 내용에 영향을 미치지 않는 내용을 넣을 때 사용

6)  <footer> 태그 : 푸터 영역을 나타낸다

    -  웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다.

    -  사이트 제작 정보나 저작권 정보, 연락처 등을 포함

    -  시맨틱 태그를 모두 사용 가능

7)  <main> 태그 : 웹 문서에서 핵심이 되는 내용

     - 메뉴, 사이드 바, 로고처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없고,

        웹 문서마다 다르게 보여 주는 내용으로 구성

     - 웹 문서에서 한 번만 사용 가능

8)  <div> 태그 : 여러 소스를 묶는다

    -  division의 줄임말로 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용

        ex. <div id="header">, <div class="detail">

    -  영역을 구별하거나 스타일로 문서를 꾸미는 것

 

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css" type="text/css">
    <style>
      header {
          width: 1000px;
          height: 100px;
          margin: 0 auto; /* block 속성일 때 가운데 배치 */
          margin-top: 10px;
          border: 2px solid black;
          overflow: hidden;
          box-sizing: border-box;
      }

      header h1 { /* logo */
          width: 200px;
          line-height: 100px;
          background-color: yellow;
          float: left;
          text-align: center;
      }

      header nav { /* 오른쪽 메뉴 */
          float: right;
          overflow: hidden;
      }

      header nav ul {
          overflow: hidden;
          background-color: antiquewhite;
      }

      header nav ul:nth-of-type(1) li {
          float: left;
          padding-left: 20px;
          background-color: yellow;
          line-height: 30px;
      }

      header nav ul:nth-of-type(2) li {
          float: left;
          padding-left: 20px;
          background-color: orange;
          line-height: 30px;
          margin-top: 40px;
      }

      #main {
          width: 1000px;
          margin: 10px auto;
          overflow: hidden;
      }

      #main section {
          width: 700px;
          float: left;
          overflow: hidden;
      }

      #main section article {
          box-sizing: border-box;
          width: 700px;
          padding: 20px;
          border: 2px solid black;
          margin-bottom: 10px;
          overflow: hidden;
      }

      #main section article > h2 {
          background-color: antiquewhite;
      }

      #main aside {
          box-sizing: border-box;
          width: 280px;
          padding: 20px;
          border: 2px solid black;
          float: right;
          overflow: hidden;
      }

      #main aside div.bannerbox {
          margin-top: 10px;
          margin-bottom: 10px;
          background-color: gray;
      }

      footer {
          box-sizing: border-box;
          width: 1000px;
          height: 50px;
          border: 2px solid black;
          margin: 10px auto;
          line-height: 50px;
          text-align: center;
          background-color: antiquewhite;
      }
    </style>
</head>
<body>
    <!--header(시맨틱 태그)-->
    <header>
        <h1>WEB-logo</h1>
        <!--nav(시맨틱 태그)-->
        <nav>
            <ul>
                <li>menu-1</li>
                <li>menu-1</li>
                <li>menu-1</li>
                <li>menu-1</li>
            </ul>

            <ul>
                <li>menu-2</li>
                <li>menu-2</li>
                <li>menu-2</li>
                <li>menu-2</li>
            </ul>
        </nav>
    </header>

    <!--본문 감싸주는 박스는 일반 선택자 박스로 지정-->
    <div id="main">
        <!--왼쪽 section (시맨틱 태그)-->
        <section>
            <!--article (시맨틱 태그)-->
            <article>
                <h2>Main Article</h2>
                <p>
                    ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
                </p>
            </article>
            <!--article (시맨틱 태그)-->
            <article>
                <h2>Main Article</h2>
                <p>
                    ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
                </p>
            </article>

            <!--article (시맨틱 태그)-->
            <article>
                <h2>Main Article</h2>
                <p>
                    ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
                </p>
            </article>
        </section>

        <!--오른쪽 aside (시맨틱 태그)-->
        <aside>
            <h2>Right aside</h2>
            <p>
                ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced.
            </p>
            <input type="email" />
            <button>mailto</button>
            <div class="bannerbox">
                <h2>TEXT</h2>
                <p>banner</p>
            </div>
        </aside>

    </div>

    <!--하단 footer(시맨틱 태그)-->
    <footer>
        <p>HTML5 COPYRIGHT</p>
    </footer>
</body>

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

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

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

[HTML] 표 만들기, 표 구조와 구성요소  (0) 2024.03.25
[HTML] input 태그 주요 속성, 폼에서 사용하는 여러가지 태그  (1) 2024.03.23
[HTML] 입력 양식 작성하기 | 폼form 삽입하기, input태그와 type 속성  (2) 2024.03.23
[HTML] 이미지 태그, 하이퍼링크 삽입  (0) 2024.03.19
[HTML] 정의 및 기본구조, 텍스트 입력 태그, 순서 목록 태그  (2) 2024.03.18

 

1.  수직 중앙 정렬에 사용하는 방법 

case 1. line-height로 부모 박스의 높이를 지정
case 2. displaydml table-cell 속성 적용 후 vertical-align 사용
case 3. position이 absolute일 경우 top: 50%; transform

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            background-color: lightgoldenrodyellow;
            text-align: center; /* 수평 중앙 정렬 */
        }
        div.line-height {
            line-height: 100px; /* 높이를 line-height로 사용 */
        }
        div.cell {
            display: table-cell;
            vertical-align: middle;
        }
        div.rel {
            position: relative;
        }
        div.rel p {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="line-height">vertical-align</div>
    <div class="cell">vertical-align</div>
    <div class="rel"><p>vertical-align</p></div>
    <!-- line-height를 사용할 경우에는 요소가 한줄이어야 함 -->
    <div class="inline-height">vertical-align vertical-align vertical-align</div>
</body>

출력 결과

 

2. overflow와 scroll

1)  overflow 속성


🚀  내부 요소가 부모 박스의 범위를 벗어날 때 어떻게 처리할 것인지 지정
🚀  콘텐츠가 자주 업데이트 되는 경우 높이가 콘텐츠 양에 따라 자동으로 변경이 되거나 박스의 높이를 고정값으로 할 때 사용

 

hidden : 영역을 벗어나는 부분은 보이지 않음
scroll : 영역을 벗어나는 부분은 스크롤 바가 나타남
visible : 박스를 넘어가도 보여줌
auto : 박스를 넘어가지 않으면 스크롤 바가 나오지 않고, 박스를 넘어갈 때 스크롤 바가 나타남

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .contents1 {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            float: left;
            box-sizing: border-box;
            margin: 10px;
        }
        .contents2 {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            float: left;
            box-sizing: border-box;
            margin: 10px;
            margin-left: 30px; /* 왼쪽과 바깥쪽 여백을 30px로 지정함 */
        }
        .contents3 {
            width: 200px;
            overflow: hidden;  /* 박스 높이가 지정되지 않았을 경우 박스 안의 내용만큼 박스 높이도 함께 늘어남 */
            border: 2px solid black;
            float: left;
            box-sizing: border-box;
            margin: 10px;
            margin-left: 30px;
        }
        .contents4 {
            width: 200px;
            height: 200px;
            overflow: hidden; /* 박스 높이가 지정되어있으면 지정된 높이만큼만 보여줌. */
            border: 2px solid black;
            float: left;
            box-sizing: border-box;
            margin: 10px;
            margin-left: 30px;
        }
    </style>
</head>
<body>
<!--박스의 높이에 맞게 텍스트 양을 넣은 예-->
<div class="contents1">
    <h4>콘텐츠의 양이 일정</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </p>
</div>

<!--박스의 높이보다 텍스트의 양이 많아서 박스 밖으로 흘러넘치는 예-->
<div class="contents2">
    <h4>콘텐츠의 양이 많거나 유동적일때 흘러 넘침</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

<!--박스의 높이를 설정하지 않고 overflow:hidden을 지정하여 텍스트만큼 높이도 함께 늘어나는 예-->
<div class="contents3">
    <h4>콘텐츠의 양에 따라서 높이가 늘어남</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

<!--박스의 높이를 지정하고 overflow:hidden을 주어서 높이만큼만 보여지도록 한 예-->
<div class="contents4">
    <h4>박스의 지정된 높이만큼만 콘텐츠가 보여짐</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</body>

 

출력 결과

 

 

2) scroll 속성

 

🚀   overflow: scroll 속성 사용
        ▶️  박스(block)의 내부 스크롤 바를 지정하고자 할 때 사용

 

overflow : 영역을 벗어나는 가로, 세로 부분을 스크롤 바로 나타나게 하거나 숨김
overflow-x : 가로 좌표에 대한 스크롤 바를 나타나게 하거나 숨김
overflow-y : 세로 좌표에 대한 스크롤 바를 나타나게 하거나 숨김

 

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .scroll_box1 {
            float: left;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 10px;
            overflow: scroll; /* 가로 세로 스크롤 바를 모두 보임 */
        }
        .scroll_box2 {
            float: left;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 10px;
            margin-left: 30px; /* 왼쪽 바깥쪽 여백은 30px로 지정함 */
            overflow-x: scroll; /* 가로 스크롤 바를 표시 */
            overflow-y: hidden; /* 세로 스크롤 바를 숨김 */
        }
        .scroll_box3 {
            float: left;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 10px;
            margin-left: 30px; /* 왼쪽 바깥쪽 여백은 30px로 지정함 */
            overflow-x: hidden; /* 가로 스크롤 바를 숨김 */
            overflow-y: scroll; /* 세로 스크롤 바를 표시 */
        }
    </style>
</head>
<body>
    <!-- 스크롤 바를 가로, 세로 모두 표시 -->
    <div class="scroll_box1">
        <h4>SCROLL-X,Y</h4>
        <p><img src="../box2/img2/camera02.png" alt="대체이미지"></p>
    </div>
    <!-- 스크롤 바를 가로만 표시 -->
    <div class="scroll_box2">
        <h4>SCROLL-X</h4>
        <p><img src="../box2/img2/camera02.png" alt="대체이미지"></p>
    </div>
    <!-- 스크롤 바를 세로만 표시 -->
    <div class="scroll_box3">
        <h4>SCROLL-Y</h4>
        <p><img src="../box2/img2/camera02.png" alt="대체이미지"></p>
    </div>
</body>

 

출력 결과

 

 

 

 

 

[ 내용 참고: IT 학원 강의 ]

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

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

[CSS] 배경 이미지 지정과 속성  (0) 2024.03.22
[CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소  (0) 2024.03.21
[CSS] display 속성과 사용 예, float, clear, 여백 조절-[margin, padding]  (0) 2024.03.20
[CSS] 박스 모델 요소 및 구성, 테두리 스타일 지정  (0) 2024.03.20
[CSS] CSS 스타일, 기본 선택자, 캐스케이딩 스타일 시트  (0) 2024.03.19

 

1.  CSS 박스 모델

 

1) 블록 레벨 요소와 인라인 레벨 요소

 

🍒  블록 레벨 block-level 요소 

      -  화면의 가로(폭) 길이 (100%)를 차지, 뒤에 오는 요소는 줄 바꿈이 일어나며 

          여러 개의 <div> 태그를 나열하면 수직 방향으로 정렬이 됨

           ▶️  대표적인 태그 : div, p, h1~h6, ul, ol, form, table, blockquote~

<body>
    <div>HTML5-WEB</div>
    <div>HTML5-WEB</div>
    <div>HTML5-WEB</div>
    <div>HTML5-WEB</div>
    <div>HTML5-WEB</div>
</body>

출력 결과

 

🍒  인라인 레벨 inline-level 요소

    -  해당 태그의 컨텐츠 만큼 공간을 차지(폭이 컨텐츠의 양에 비례), 글자와 같이 옆으로 나열되며 나타남
    -  줄 바꿈이 일어나지 않기 때문에 <span></span> 이라고 나열하면 수평 방향으로 정렬
    -  width, height, margin-top, margin-bottom이 적용되지 않음
    -  태그 종류 : a, img, span, sub, sup, i, b, em(글자를 꾸미는 태그 종류), input

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <span>SPAN-inline</span>
    <span>SPAN-inline</span>
    <span>SPAN-inline</span>
    <span>SPAN-inline</span>
    <span>SPAN-inline</span>

</body>

출력 결과

 

span에 margin 적용 시 margin-left, margin-right는 적용되어서 나오는 예시
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <span> inline 성격의 태그</span>
    <span> inline 성격의 태그</span>
</body>

출력 결과

 

2)  박스 모델의 기본 구성

 

 

 

🍒  박스모델 box model 요소

     -  박스 형태인 요소를 말함

     -  콘텐츠 영역 ▶️ 패딩 padding ▶️ 테두리 border ▶️ 마진 margin 으로 구성

     -  마진이나 패딩은 웹 문서에서 다른 콘텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념

 

 

💡  박스의 실제 넓이와 높이 공식
     - 한개의 박스에 margin + border + padding 값이 모두 적용되었다는 가정
     - width 속성과 height 속성은 텍스트가 들어가는 영역(contents)의 넓이와 높이를 지정

* 전체 넓이 : width + 2 * (margin + border + padding)
* 전체 높이 : height + 2 * (margin + border + padding)

 

3) 콘텐츠 영역의 크기를 지정하는 width, height 속성

 

종류 설명
<크기> 너비나 높이의 값을 px이나 em 단위로 지정
<백분율> 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%) 로 지정
auto 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정된다. 기본값.

🍒  넓이 / width : 크기 | 백분율 | auto
🍒  높이 / height : 크기 | 백분율 | auto

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 300px; /* 고정 넓이 */
            height: 100px; /* 고정 높이 */
            background-color: blue;
        }
        #box2 {
            width: 50%; /* 가변 넓이 - 현재 브라우저 창 너비의 50%를 유지 */
            height: 100px; /* 고정 높이 */
            background-color: green;
        }
      
    </style>
</head>
<body>
    <div class="box1">BOX-1</div>
    <div id="box2">BOX-2</div>
</body>

 

전체 창 출력
브라우저 창 크기를 줄였을 때

 

 

4) box-sizing 속성

 

🍒  width 속성과 height 속성은 콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기를 가리킨다

🍒  웹 문서에 여러 가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야 함

 

  💡 box-sizing은 박스 모델의 크기를 쉽게 계산하기 위해 지정하는 속성

종류 설명
boder-box 테두리까지 포함해서 너빗값을 지정
content-box 콘텐츠 영역만 너빗값을 지정. 기본값. 
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 10px solid black; /* 테두리 스타일 */
            padding: 30px; /* 안쪽 여백 공통 지정 */
        }
        .box1 {
            box-sizing: border-box;
            /* 박스의 테두리와 여백을 박스의 넓이와 높이에 포함. 넓이가 300px */
        }
        .box2 {
            box-sizing: content-box;
            /* 기본값과 동일. 넓이: 300 + 20 + 60 = 380px */
        }
    </style>
</head>
<body>
    <div class="box1">01</div>
    <div class="box2">02</div>

</body>

출력 결과

 

5)  box-shadow 속성

 

🍒  사진 주변에 그림자를 추가하는 속성

🍒  수평 거리와 수직 거리는 필수로 지정 ▶️  그림자의 위치는 수평 거리와 수직 거리의 값에 따라 움직이기 때문

box-shadow: <수평거리> <수직거리> <흐림 정도> <번짐 정도> <색상> inset

 

종류 설명
<수평 거리> 그림자가 가로로 얼마나 떨어져 있는지 나타냄.
양수는 오른쪽 / 음수는 왼쪽
<수직 거리> 그림자가 세로로 얼마나 떨어져 있는지 나타냄.
양수는 아래쪽 / 음수는 위쪽
<흐림 정도> 생략하면 0을 기본값으로 하여 진한 그림자를 표시.
값이 커질수록 부드러운 그림자를 표시하며 음수는 사용불가.
<번짐 정도> 양수는 모든 방향으로 그림자가 퍼져 박스보다 그림자가 크게 표시.
음수는 모든 방향으로 그림자가 축소되어 보임.
기본값은 0
<색상> 한 가지만 지정할 수도, 공백으로 구분해서 여러 개 색상 지정 가능
기본값은 검정색
inset 이 키워드를 함께 표시하면 안쪽 그림자로 그린다.

 

2.  테두리 스타일 지정

 

1) 박스 모델의 방향

 

🍒  박스 모델은 상하좌우 4개의 방향이 있어 테두리나 마진, 패딩 등을 지정할 때 한꺼번에 똑같이 지정하거나

      모두 다르게 지정할 수도 있다.

🍒  맨 윗 부분은 top ▶️ 오른쪽은 right ▶️ 아래쪽은 bottom ▶️ 왼쪽은 left  (시계 방향)

       

 

 

2) 테두리 스타일을 지정하는 border-style 속성

 

종류 설명
none 기본값. 테두리가 없다.
hidden 테두리를 감춘다. 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않는다.
solid 테두리를 실선으로 표시
dotted 테두리를 도트형태의 점선으로 표시
dashed 테두리를 직선형태의 점선으로 표시
double 테두리를 이중선으로 표시. 두 선 사이의 간격이 border-width값이 된다.
groove 테두리를 창에 조각한 것처럼 표시. 홈이 파인 듯 입체 느낌이 난다.
inset 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시
표에서 border-collapse: collapse일 경우 groove와 똑같이 표시
outset 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시
표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시
ridge 테두리를 창에서 튀어나온 것처럼 표시 
<style>
    #box1 { border-style:solid; }  /* 실선 */
	#box2 { border-style:dotted; }  /* 점선 */
    #box3 { border-style:dashed; }  /* 짧은 직선 */
</style>

 

3) 테두리 두께를 지정하는 border-width 속성

 

border-width: <크기> | thin | medium | thick

 

🍒  속성 값이 1개  ▶️  4개 방향 테두리 모두 같은 값 적용

🍒  속성 값이 2개  ▶️  첫 번째 값은 top, bottom 테두리 / 두 번째 값은 left, right 테두리 적용

🍒  속성 값이 3개  ▶️  top, right, bottom 순으로 적용 / left 값은 마주보는 right 속성값과 똑같이 적용

🍒  속성 값이 4개  ▶️  top, right, bottom, left 순으로 적용

 

4) 테두리 색상을 지정하는 border-color 속성

 

🍒  테두리 색상을 지정

      ➡️  border-color 사용해서 4개 방향의 테두리 색상 한꺼번에 지정

      ➡️  border-top-color 처럼 테두리 방향을 넣어주면 색상을 하나씩 지정 가능

 

5) 테두리 스타일 묶어 지정하는 border 속성

 

🍒  테두리 스타일과 두께, 색상의 속성을 따로 사용하면 소스 길이가 길어짐

       ▶️  3가지를 한꺼번에 표현하는 방법이 border 속성을 사용하는 것 ( 속성 값 순서는 상관 없다 )

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box1 {
        width: 300px; /* 고정 넓이 */
        height: 100px; /* 고정 높이 */
        border: green 2px solid; /* 테두리 굵기는 2px, 테두리 스타일 solid, 테두리 색상 green */
    }
    .box2 {
        width: 300px;
        height: 100px;
        border: red dashed;
        border-width: 1px 5px 10px 12px; /* 12시 부터 시계 방향으로 */
    }
    .box3 {
        width: 300px;
        height: 100px;
        border: blue 1px dotted;
        border-bottom-width: 5px; /* 아래 테두리만 따로 지정 */
    }
    .box4 {
        width: 300px;
        height: 100px;
        border: pink dashed;
        border-width: 5px 10px; /* (12시 6시) (3시 9시) */
    }
     </style>
</head>
<body>
    <div class="box1">BOX-1</div>
    <div class="box2">BOX-2</div>
    <div class="box3">BOX-3</div>
    <div class="box4">BOX-4</div>
</body>

 

6) 둥근 테두리를 만드는 border-radius 속성

 

border-radius: <크기> | <백분율>

 

🍒  border-radius 속성을 사용하면 꼭짓점 부분에 원이 있다고 가정해서 둥글게 처리

      ▶️  이 때 원의 반지름을 이용하면 둥근 정도를 나타낼 수 있다

🍒  라운드 지정하는 순서는 top-left, top-right, bottom-right, bottom-left
🍒  원 형태로 만들고 싶다면 border-radius 반지름값을 너비나 높이의 50%로 지정하면 된다.

 

 

<head>  
    <style>
        div {
            width: 300px;
            height: 100px;
            border: green 10px solid;
            margin: 10px;
        }
        .box1 {
            border-radius: 30px ; /* 전체 모서리를 30px로 라운드 지정 */
        }
        .box2 {
            border-radius: 10px 20px 30px 40px;
            /* top-left: 10px, top-right: 20px; bottom-right: 30px, bottom-left: 40px 라운드 지정 */
        }
        .box3 {
            border-radius: 10px 40px;
            /* top-left: 10px, top-right: 40px; bottom-right: 10px, bottom-left: 40px 라운드 지정 */
        }
        .box4 {
            width: 100px; height: 100px; border-radius: 100px; /* 원모양 */
        }
      
    </style>
</head>
<body>
    <div class="box1">BOX-1</div>
    <div class="box2">BOX-2</div>
    <div class="box3">BOX-3</div>
    <div class="box4">BOX-4</div>
</body>

 

출력 결과

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

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

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

[CSS] 배경 이미지 지정과 속성  (0) 2024.03.22
[CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소  (0) 2024.03.21
[CSS] 수직 중앙 정렬 방법, overflow와 scroll  (0) 2024.03.21
[CSS] display 속성과 사용 예, float, clear, 여백 조절-[margin, padding]  (0) 2024.03.20
[CSS] CSS 스타일, 기본 선택자, 캐스케이딩 스타일 시트  (0) 2024.03.19

+ Recent posts

티스토리툴바