20220225_HTML/CSS : CSS로 편집 디자인하기

2022. 2. 25.ㆍ공부/HTML,CSS

728x90
padding & margin 

 

padding은 어떤 박스 공간의 경계와 실제 내부 요소 간의 거리를 설정한다. 값을 하나만 적으면 상하좌우 4군데, 두 개 적으면 (상하, 좌우) 거리순, 네 개 적으면 12시 방향부터 시계 방향으로 적용된다. 

 

[왼] padding : 30px 100px; [오른] padding : 120px 30px 100px 10px;

 

margin은 padding 외부의 공간이다. 마찬가지로 패딩처럼 1개를 주면 사방, 2개를 주면 위아래와 양옆, 4개를 주면 12시부터 시계방향으로 하나씩 마진 값을 적용해준다.

 

 

바디가 가진 상하좌우 여백은 흰 공간 = margin(바깥여백), 텍스트 주위의 상하좌우 여백은 오렌지색 = padding(안쪽여백)

style 태그 내에서 마진 값을 늘릴 경우 흰 공간이 증가하며, padding 값을 늘릴 경우 오렌지색 공간이 증가한다.

 

 

 

 

 

 

HTML 코드로 편집 디자인하기

 

★ 단락 정렬하려면? text-align

left, right, center, justify(양쪽정렬)

 

<head>
    <style>
        p {width:600px;}
        /* text2 텍스트의 내용을 정렬합니다.
            left(왼쪽정렬)
            right(오른쪽정렬)
            center(중앙정렬)
            justify(양쪽정렬)
            블록태그에만 적용할 수 있습니다. */
        p.text1 {text-align:right;} /* default는 left */
        p.text2 {text-align:justify;}
    </style>
    <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>Document</title>
</head>
<body>
    <p class="text1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium quam ut nibh dignissim, id posuere nisl congue. Quisque fringilla risus vel ex hendrerit interdum. Praesent a risus feugiat, dapibus quam sed, auctor felis. Mauris euismod cursus varius. Vestibulum interdum dapibus libero quis tincidunt. Proin a sapien nibh. Sed in pellentesque magna.
    </p>
    <p class="text2">
        겨울이 것은 슬퍼하는 버리었습니다. 토끼, 다하지 벌써 소학교 하나에 무성할 이름과 잠, 봅니다. 차 걱정도 풀이 계절이 하나에 쉬이 이름자 버리었습니다. 나는 아직 아이들의 애기 멀리 이런 거외다. 피어나듯이 슬퍼하는 이국 별 봄이 어머님, 하나 계십니다. 별 흙으로 내린 했던 이런 멀듯이, 다 내일 보고, 까닭입니다. 동경과 못 어머님, 별 했던 이름과, 너무나 거외다. 둘 부끄러운 별 비둘기, 계십니다. 어머님, 새워 하나에 있습니다. 그리워 나의 많은 별 계집애들의 같이 까닭입니다.
    </p>
</body>
</html>

 

 

★ 자간 조정하려면? letter-spacing

0~ px

 

<head>
    <style>
        /*
            letter-spacing은 글씨 공간
            즉 자간(글자 간 간격)을 설정합니다.
            넣어준 수치만큼 글씨 사이를 벌려줍니다.
        */
        h1 {letter-spacing:20px;}
    </style>
    <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>Document</title>
</head>
<body>
    <h1>CSS 이후 공부는 Javascript로</h1>
</body>

 

 

★ 수직 정렬 (상대적 정렬)하려면? vertical-align

top, middle, bottom

 

<head>
    <style>
        /* top(상단에 정렬),
           middle(중앙 정렬),
           bottom(하단 정렬) */
        p img {vertical-align:bottom;}
    </style>
    <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>Document</title>
</head>
<body>
    <p>vertical align
     <img width="200px" src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dW5pdmVyc2V8ZW58MHx8MHx8&w=1000&q=80">
    </p>
    </body>

 

 

★ 들여쓰기 하려면? text-indent

0~ px

 

<head>
    <style>
        /* 30px만큼 들여쓰기 */
        .indent {text-indent: 30px;}
    </style>
    <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>Document</title>
</head>
<body>
    <h1>&nbsp;&nbsp;&nbsp;들여쓰기 전</h1>
    <h2 class="indent">들여쓰기 후</h2>
</body>

[좌] text-indent로 들여쓴 텍스트 [우] 띄어쓰기 이용하여 들여쓴 텍스트

 

 

★ 대문자를 소문자로, 혹은 반대로 text-transfrom

capitalize(각 단어의 앞글자를 대문자로), uppercase(모든 글자를 대문자로), lowercase(모든 글자를 소문자로)

 

<head>
    <style>
        /* 적용된 태그 내 글자의
        대소문자 여부를 관리합니다.
        영문자에만 적용됩니다.
        capitalize(각 단어의 앞글자를 대문자로) - 대문자인 것을 소문자로 내려주진 않음
        uppercase(모든 글자를 대문자로)
        lowercase(모든 글자를 소문자로) */
        p {text-transform : capitalize;}
    </style>
    <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>Document</title>
</head>
<body>
    <p>happy BIRHDAY to YOU!</p>
</body>

 

 

★ 글자에 줄 긋기 text-decoration 

underline(밑줄), overline(윗줄), line-throught(가운데줄=취소선), none(있던 밑줄 제거)

 

<head>
    <style>
        /* 글자에 밑줄, 윗줄, 가운데줄을 치거나
        원래 있던 밑줄을 없애줍니다.
        underline(밑줄), overline(윗줄),
        line-throught(가운데줄, 취소선),
        none(있던 밑줄 제거) */
        a {text-decoration: overline 1px rgb(181, 157, 19);}
    </style>
    <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>Document</title>
</head>
<body>
    <ul>
        <li><a href="#">현재상영중</a></li>
        <li><a href="#">상영예정</a></li>
    </ul>
</body>

 

 

border의 다양한 속성

 

https://developer.mozilla.org/ko/docs/Web/CSS/border-style

  • none - x
  • hidden - 숨겨진
  • dotted - 동그란 점으로 이루어진 선
  • dashed - 사이에 간격이 있는 선
  • solid - 실선
  • double - 두 줄로 그어진 선
  • groove - 테두리를 음각으로(안으로 파여진 것처럼) 표현, ridge와 반대 효과
  • ridge - 테두리를 양각으로(밖으로 튀어나온 것처럼) 표현, groove와 반대 효과
  • inset - 요소 자체가 안으로 파여진 것처럼 음각으로 표현됨, outset과 반대 효과
  • outset - 요소 자체가 밖으로 튀어나온 것처럼 양각으로 표현됨, inset과 반대 효과 

 

 

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

'공부 > HTML,CSS' 카테고리의 다른 글

20220302_ HTML/CSS : position, 컨텐츠가 overflow일 때 처리  (0) 2022.03.02
20220228_HTML/CSS : display, float  (0) 2022.03.01
20220224_HTML/CSS : 선택자, font  (0) 2022.02.24
20220223_HTML : input 태그 2, <div> 태그  (0) 2022.02.23
20220222_HTML : 리스트 태그, 표 태그, input 태그  (0) 2022.02.22

관련글

댓글 0

티스토리툴바