23-02-20 css3

HTML5, CSS3/HTML5, CSS3

23-02-20 css3

모건이삼촌 2023. 2. 20. 17:41

1. margin(외부 여백), pading (내부 여백)

- 테두리와 다른 컨텐츠와의 거리

- margin만 음수 허용

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    /* 
    컨텐츠의 최종 크기 계산 
    width, height 기본값이 얼마인지 알아야 함

    최종 width : width + 양쪽 패딩 + 양쪽 테두리

    */
    body {border:  1px solid blue; padding: 10px;}
    .wrap {width: 500px; border: 1px solid; padding: 20px;}
    h3 {width: 200px; border: 1px solid red; padding: 30px;}
  </style>
</head>
<body>
  <div class="wrap">
  <h3>텍스트 영역</h3>
</div>
</body>
</html>

상하 margin일때는 큰쪽 margin을 따라감

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    /* 
    컨텐츠의 최종 크기 계산 
    width, height 기본값이 얼마인지 알아야 함

    최종 width : width + 양쪽 패딩 + 양쪽 테두리

    */
    body {border:  1px solid blue; padding: 10px;}
    .wrap {width: 500px; border: 1px solid; padding: 20px;}
    h3 {width: 200px; border: 1px solid red; padding: 30px; margin-top: 30px; margin-bottom: 50}
  </style>
</head>
<body>
  <div class="wrap">
  <h3>텍스트 영역</h3>
  <h3>텍스트 영역</h3>
  <h3>텍스트 영역</h3>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    /* 
    컨텐츠의 최종 크기 계산 
    width, height 기본값이 얼마인지 알아야 함

    최종 width : width + 양쪽 패딩 + 양쪽 테두리

    */
    body {border:  1px solid blue; padding: 10px;}
    .wrap {width: 500px; border: 1px solid; padding: 20px;}
    h3 {width: 200px; border: 1px solid red; padding: 30px; margin-top: 30px; margin-bottom: 50px; margin-left: auto; margin-right: auto;}
  </style>
</head>
<body>
  <div class="wrap">
  <h3>텍스트 영역</h3>
  <h3>텍스트 영역</h3>
  <h3>텍스트 영역</h3>
</div>
</body>
</html>

1-2) 여백을 4개로 설정하는 방법

- 순서가 가장 중요함 (위 부터 시계방향)

margin: 30px auto 50px auto;

※ 4방향을 주는 속성은 모두 설정하는 방법이 같다.

body {border:  1px solid blue; padding: 20px 30px 40px;}

- 3개로 설정하는 방법 (기입하지 않은곳은 맞은편을 바라본다. / 2개 쓸때도 같음 / 1개는 4방향 전체)

margin: 30px auto 50px;

- padding 20 30 20 40

    body {border:  1px solid blue; padding: 20px 30px; padding-left: 40px;}

2. text-align 스타일

- 텍스트 수평 정렬

- left, right, center, justify 4개의 속성값이 있음

- text는 인라인판정

- justify는 행에대한 이동이 발생해야 양쪽정렬을 함

   p {width: 350px;}
      p:nth-of-type(1) {text-align: justify;}
      p:nth-of-type(2) {text-align: justify;}
      p:nth-of-type(3) {text-align: center;}
  </style>
</head>
<body>
  <div class="wrap">
  <h3>텍스트 영역</h3>
  <h3>텍스트 영역</h3>
  <h3>텍스트 영역</h3>
  <p>적은 텍스트</p>
  <p>사면·감형 및 복권에 관한 사항은 법률로 정한다. 군인·군무원·경찰공무원 기타 법률이 정하는 자가 전투·훈련등 직무집행과 관련하여 받은 손해에 대하여는 법률이 정하는 보상외에 국가 또는 공공단체에 공무원의 직무상 불법행위로 인한 배상은 청구할 수 없다.</p>
  <p>대한민국은 민주공화국이다. 위원은 정당에 가입하거나 정치에 관여할 수 없다. 국가는 건전한 소비행위를 계도하고 생산품의 품질향상을 촉구하기 위한 소비자보호운동을 법률이 정하는 바에 의하여 보장한다.</p>
</div>
</body>
</html>

※ 오버플로우 정리 필요

3. white-space(공백)

<style>
    .img-thumb-wrapper {border: 1px solid;}
    .img-thumb-wrapper img {width: 200px; transition: all .2s;}
    .img-thumb-wrapper img:hover {transform: scale(1.03);}
    .img-thumb-wrapper > div {display: inline-block; margin: 20px; overflow: hidden;}
  </style>

        <div class="img-thumb-wrapper">
      <div><img src="../img/blog-post-img1.jpg"></div>
      <div><img src="../img/blog-post-img2.jpg"></div>
      <div><img src="../img/blog-post-img3.jpg"></div>
      <div><img src="../img/blog-post-img4.jpg"></div>
      <div><img src="../img/blog-post-img5.jpg"></div>
      <div><img src="../img/blog-post-img6.jpg"></div>
    </div>

4. border

- 박스블록에 테두리 두께, 스타일, 색상 지정

- 테두리는 속성과 속성값을 사용하여 지정

307p 07-22-1 표 삽입

- 컨텐츠의 최종 너비에 테두리값이 포함된다

5. box-sizing

- 사용금지

- 수정시

5-1) border-radius

- 모서리를 둥글게 만듦

<style>
     .border {width: 300px; height: 200px; background-color: pink; margin: 10px auto;}
     .radi1 {border-radius: 20px; border-top-left-radius: 50px;}
     .radi2 {border-radius: 50px 10px 100px;}
     .radi3 {border-top-right-radius: 100px 50px;}
     .radi4 {height: 300px; padding: 20px; border: 5px solid red; border-radius: 50%;}
  </style>
    <div class="border radi1"></div>
    <div class="border radi2"></div>
    <div class="border radi3"></div>
    <div class="border radi4"></div>

6. 벤더 프리픽스 (거의 안씀)

권고안에 포함되지 못한 기능을 사용하고자 할때 벤더 프리픽스를 사용하게 됨

브라우저별 접두사

     .radi4 {height: 300px; padding: 20px; border: 5px solid red; border-radius: 50%;
      /* background-image: -webkit-linear-gradient(right,red,white); */
      background-image: linear-gradient(to right,red,white);
    }

※ 참고 (버전)

https://www.w3.org/Style/CSS/current-work.en.html#translations

CSS current work & how to participate

CSS Text Level 4 WD WD ℹ⃝

www.w3.org

1. html의 버전은 통합관리

2. css의 버전은 모듈별 개별관리

- 모듈 : 배경, border, box-model 등등

7. 외곽선(Outline CSS / 안씀)

8. opacity

투명도 조정

    .img-thumb-wrapper img {width: 200px; transition: all .2s; opacity: .4;}
    .img-thumb-wrapper img:hover {transform: scale(1.03); opacity: 1;}

9. float (중요)

예를들어 img태그를 사용시 수평배치가 되는데 코드의 가독성을 위해 엔터를 치면 이미지 사이에 공백이 생긴다.

레이아웃에 대한 공백을 없앨때 float를 사용한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
   body {margin: 0;}
   body img {display: block; float: left;}
  </style>
</head>
<body>
  <img src="../img/ban1.gif">
  <img src="../img/ban2.gif">
  <img src="../img/ban3.gif">  
  <img src="../img/ban4.gif">  
</body>
</html>

- 부동요소 뒤의 요소는 그 주위로 흐른다. 이를 방지하려면 clear 속성 또는 clearfixhack을 만들어 사용하면 편리

- float는 한 요소가 보통 흐름으로부터 빠져 모든대상(블록, 인라인)이 그 주위를 감싸는 자기 컨테이너의 좌 우측을 따라 배치되어야 함을 지정

10. clear

- float를 해제

예제) 27이랑 이어짐

   .clearfix::after{content: ''; display: block; clear: both;}

* 이미지 갤러리

그리드시스템 참고해서 작업

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    /* 
      1024px : 978px~998px
      1280px : 1200px~1240px
    */
    body {margin: 0;}
    .wrap {width: 978px; margin: 0 auto;}
    .card {width: 440px; padding: 20px; float: left;}
    .card img {width: 160px; transition: all .2s;}
    .card a {color: #222; text-decoration: none;}
    .card a > * {float: left;}
    .card a > div:first-child {margin-right: 20px; overflow: hidden;}
    .card a > div:last-child {width: 260px;}
    .card a > div > p {height: 42px; overflow-y: hidden;}
    .card a > div > h3, .card a > div > h4 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .card h3 {color: #00cc00;}
    /* a태그안에 있는 이미지가 커짐 */
    .card a:hover img {transform: scale(1.03);}
    .card a > div:last-child:hover h4 {text-decoration: underline;}
    
  </style>

</head>
<body>
   <div class="wrap">
    <div class="card">
      <a href="https://www.naver.com">
       <div>
          <img src="../img/work-1.jpg">
        </div>
        <div>
          <h3>온스테이지 온스테이지 온스테이지 온스테이지 온스테이지</h3>
          <h4>배현이 배현이 배현이 배현이 배현이 배현이 배현이</h4>
          <p>하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다</p>
      </div>
    </a>
    </div>
    <div class="card">
      <a href="https://www.naver.com">
       <div>
          <img src="../img/work-2.jpg">
        </div>
        <div>
          <h3>온스테이지 온스테이지 온스테이지 온스테이지 온스테이지</h3>
          <h4>배현이 배현이 배현이 배현이 배현이 배현이 배현이</h4>
          <p>하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다</p>
      </div>
    </a>
    </div>
    <div class="card">
      <a href="https://www.naver.com">
       <div>
          <img src="../img/work-3.jpg">
        </div>
        <div>
          <h3>온스테이지 온스테이지 온스테이지 온스테이지 온스테이지</h3>
          <h4>배현이 배현이 배현이 배현이 배현이 배현이 배현이</h4>
          <p>하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다</p>
      </div>
    </a>
    </div>
    <div class="card">
      <a href="https://www.naver.com">
       <div>
          <img src="../img/work-4.jpg">
        </div>
        <div>
          <h3>온스테이지 온스테이지 온스테이지 온스테이지 온스테이지</h3>
          <h4>배현이 배현이 배현이 배현이 배현이 배현이 배현이</h4>
          <p>하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다</p>
      </div>
    </a>
    </div>
    <div class="card">
      <a href="https://www.naver.com">
       <div>
          <img src="../img/work-5.jpg">
        </div>
        <div>
          <h3>온스테이지 온스테이지 온스테이지 온스테이지 온스테이지</h3>
          <h4>배현이 배현이 배현이 배현이 배현이 배현이 배현이</h4>
          <p>하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다</p>
      </div>
    </a>
    </div>
    <div class="card">
      <a href="https://www.naver.com">
       <div>
          <img src="../img/work-6.jpg">
        </div>
        <div>
          <h3>온스테이지 온스테이지 온스테이지 온스테이지 온스테이지</h3>
          <h4>배현이 배현이 배현이 배현이 배현이 배현이 배현이</h4>
          <p>하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다</p>
      </div>
    </a>
    </div>
    <div class="card">
      <a href="https://www.naver.com">
       <div>
          <img src="../img/work-7.jpg">
        </div>
        <div>
          <h3>온스테이지 온스테이지 온스테이지 온스테이지 온스테이지</h3>
          <h4>배현이 배현이 배현이 배현이 배현이 배현이 배현이</h4>
          <p>하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다</p>
      </div>
    </a>
    </div>
    <div class="card">
      <a href="https://www.naver.com">
       <div>
          <img src="../img/work-8.jpg">
        </div>
        <div>
          <h3>온스테이지 온스테이지 온스테이지 온스테이지 온스테이지</h3>
          <h4>배현이 배현이 배현이 배현이 배현이 배현이 배현이</h4>
          <p>하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다 하고싶은것만 하고 산다</p>
      </div>
    </a>
    </div>
   </div>  
</body>
</html>

11. before, after

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    /* 가상요소(psuedo prop)
      ::before
      ::after
    */
    h3 {border: 1px solid;}
    h3::before {content: 'Before 앞에'; display: block;}
    h3::after {content: 'After 뒤에';}
  </style>
</head>
<body>
  <h3>Hello HTML</h3>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    .balloon {background-color: #222; color: white;max-width: 300px; padding: 20px; border-radius: 10px;}
    .balloon::after {
      /* position: absolute; */
      float: left;
      width: 0; border: 20px solid transparent; border-top-color: #222 ; border-top-width: 40px;
      margin-top: 20px;
      margin-left: 130px; transform: skewX(-30deg); display: block; content: '';
    }
  </style>
</head>
<body>
  <div class="balloon">안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요</div>
  <div class="tri"></div>
</body>
</html>

12. display

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    div {width: 500px; margin: 0 auto;}
    img {width: 200px;}
    input:checked + label {color: green;}
    #id1:checked ~ img {display: block;}
    #id2:checked ~ img {display: inline;}
    #id3:checked ~ img {display: inline-block;}
    /* 아예 배치를 안함 */
    #id4:checked ~ img:nth-last-of-type(2) {display: none;}
    /* visibility: hidden 설정을 하면 렌더링은 되지만 보이지 않는다. */
    #id5:checked ~ img:nth-last-of-type(2) {visibility: hidden;}
    </style>
</head>
<body>
  <div>
    <input type="radio" name="select" id="id1"><label for="id1">block</label>
    <input type="radio" name="select" id="id2" checked><label for="id2">inline</label>
    <input type="radio" name="select" id="id3"><label for="id3">inline-block</label>
    <input type="radio" name="select" id="id4"><label for="id4">none(2nd)</label>
    <input type="radio" name="select" id="id5"><label for="id5">invisible(2nd)</label>
    <hr>
    <img src="../img/ban1.gif">
    <img src="../img/ban2.gif">
    <img src="../img/ban3.gif">
  </div>
</body>
</html>

'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글

23-02-21 CSS3 (position, transition, transform, FlexBox, 미디어 쿼리, seletor) (0)	2023.02.21
23-02-17 CSS3 (0)	2023.02.17
23-02-16 HTML5 (0)	2023.02.16
23-02-15 HTML5 (0)	2023.02.15
23-02-14 HTML5, CSS3 (0)	2023.02.14

현재글23-02-20 css3

개발공부

개발자 도전기

23-02-20 css3

'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글

'HTML5, CSS3/HTML5, CSS3'의 다른글

티스토리툴바

« 2025/09 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

23-02-20 css3

'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글

'HTML5, CSS3/HTML5, CSS3'의 다른글

관련글

티스토리툴바