정신과 시간의 방

1. 정렬과 간격(자간, 스페이스 크기, 줄 높이)

p {
  /* left, center, right, justify */
  text-align: left;

  letter-spacing: 0;
  word-spacing: 0;
  line-height: 1.5em;
  
    /*  justify는 채워 쓰기 (글의 양쪽 끝을 맞춘다.)
    	스페이스바 간격은 em이나 %등 상대적인 걸로 하는 것이 좋다
      왜냐하면, 간격을 상대적 크기로 해야 폰트나 글자 크기에 맞게 간격이 띄워지기 때문이다. 
      들여쓰기도 마찬가지 */
}

2. 들여쓰기

p { text-indent: 0.8em; }
  
    /* 들여쓰기도 마찬가지로 얼마나 들여쓰는 지를 글자 폰트 자체의 띄어쓰기 비율에 맞추는 것이 
       좋기 때문에, em이나 %같은 상대적 비율로 쓰느 것이 좋다.*/
}

3. 목록표 커스터마이징

<!--새로운 Emmet 문법-->
ul>li{ul 아이템 $}*3^ol>li{li 아이템 $}*3

<!--$는 반복되는 횟수만큼 카운트 해서 적어 넣는 것.
	^는 자식 클래스 레벨에서 부모 클래스 레벨로 빠져 나오는 것.
    따라서 위의 문법은 첫 ul과 ^ol이 같은 레벨에 있게 된다.-->
    
 <!--Emmet 풀었을 때 모습-->
   <ul>
    <li>ul 아이템 1</li>
    <li>ul 아이템 2</li>
    <li>ul 아이템 3</li>
  </ul>
  <ol>
    <li>li 아이템 1</li>
    <li>li 아이템 2</li>
    <li>li 아이템 3</li>
  </ol>

   
   /*disc: 찬 동그라미, circle: 빈 동그라미 등 많음. url 써서 원하는 이모티콘으로 커스터 마이징 가능 
   	 순서 없어도 CSS로 번호 순으로 만들수도 있고, 순서 있어도 다 동그마리로 채울 수 있다. 
     하지만 겉모양만 바뀌었지 HTML에서 전달하는 정보 (이건 순서 있는 것, 이건 없는 것)은 변하지 않는다.*/
   ul {
      list-style: circle;
    }
    
    /* li별로 지정하는 것도 가능 */
    ul > li:first-child {
      list-style: url(https://showcases.yalco.kr/html-css/02-03/yalco.png)
    }
    
    
    ol {
      list-style: lower-alpha;
    }

4. 스스로 해보기

<!DOCTYPE html>
<html lang="ko">
<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>

  <link rel="stylesheet" href="./1_style.css">

  <style>
    .style-1 {
      color: olivedrab;
    }
  </style>
</head>
<body>
<p>
  사물수필을 즐겨 쓰는 최장순 작가가 신작 디카에세이집 『나는 모자를 벗었다, 썼다 한다』를 출간했다. 간혹 포토에세이집이 출간된 적은 있으나, ‘디카에세이’라는 이름으로 책을 낸 것은 처음이다. 디카에세이의 대중성과 친밀성을 위한 새로운 시도라 할 수 있다. 디카에세이는 스마트폰으로 스쳐지나갈 것을 담아 즉흥적으로 생각을 접목하는 형식이다. 가공하지 않은 이미지 그대로, 소담하고 멋을 부리지 않은 날것을 담아낸다는 점에서 포토에세이와 차별화된다. 즉각적이고 순간적인 포착, 날렵하고, 발랄하고, 경쾌한 느낌들이 오히려 정겹고 진솔한 글의 힘이 된다. 우리 일상은 여러 모양으로 여러 색깔로 여러 차원으로 모습을 드러낸다. 하나의 입각점에서 볼 수밖에 없는 지각의 특성과 한계를 뛰어넘으려는 최장순 작가는 전지적 관찰을 통해 사물의 내면에 흐르는 욕구나 욕망, 드러난 현상을 새롭게 해석해 내는 데 탁월하다.
</p>
<ol>
  <li> ordered list 1</li>
  <li> ordered list 2</li>
  <li> ordered list 3</li>
</ol>
<ul>
  <li>unordered item 1</li>
  <li>unordered item 2</li>
  <li>unordered item 3</li>
</ul>

</body>
</html>

  /*
  1. 정렬과 간격(자간, 스페이스 크기, 줄 높이)
  2. 들여쓰기
  3. 목록표 커스터마이징
  */

  p{
    text-align: justify;
    letter-spacing: 0;
    word-spacing: 0em;
    line-height: 1.5em;

    text-indent: 2em;
  }

  ol{
    list-style: '🚀';
  }


  ul{
    list-style: '😎';
  }
  ul li:hover, ol li:hover {
    color:black;
    font-weight: bold;
  }

저작자표시

[CSS] 문단과 목록 스타일 만들기

1. 정렬과 간격(자간, 스페이스 크기, 줄 높이)

2. 들여쓰기

3. 목록표 커스터마이징

4. 스스로 해보기

티스토리툴바