박스모 활용(글자간 간격)

Front-end/HTML CSS

박스모 활용(글자간 간격)

warrior.p 2022. 3. 30. 13:08

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Profile</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="header">
        <img class="profile" src="images/profile04.png" />
        <h1>JANE DOE</h1>
        <p>WEB DESIGNER</p>
      </div>
      <div class="contents">
        <div class="section information">
          <h2>Information</h2>
          <ul>
            <li>JANE DOE</li>
            <li>0000@naver.com</li>
            <li>Seoul, Korea</li>
          </ul>
        </div>

        <div class="section skills">
          <!--section/skills 각각의 클래스를 넣은것임!-->
          <h2>Skills</h2>
          <ul>
            <li>HTML+CSS</li>
            <li>JavaScript</li>
            <li>REACT</li>
          </ul>
        </div>
      </div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

CSS

/*CSS reset ( 우선적으로 해줘야함)*/

h1,
h2 p,
ul {
  margin: initial; /*margin=0*/
  padding: 0;
}

li {
  list-style-type: none;
}

img {
  vertical-align: top;
}
/*  */

body {
  background-color: beige;
}

.wrapper {
  background-color: blanchedalmond;
  width: 800px;
  margin: 0 auto;
}

.header {
  background-size: cover;
  background-position: center;
  background-image: url(images/cover04.png);
  padding: 80px 0;
  text-align: center; /* inline elements(text)만 가운데 정렬.*/
  color: white;
}

.header .profile {
  width: 140px;
  border: 10px solid white;
  border-radius: 50%;
}

.header h1 {
  font-size: 100px;
}

.header p {
  border-top: 10px solid;
  width: 400px;
  margin: 20px auto;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

.section {
  background-image: url(images/icon-information.png);
  background-repeat: no-repeat;
  background-position: right 30px center; /*오른쪽에서 30 px 떨어짐*/
  background-color: white;
  margin: 20px;
  padding: 20px;
}

.section h2 {
  color: blue;
  margin-bottom: 20px;
}

.section.skills {
  background-image: url(images/icon-skills.png);
} /*작성 순서도 중요합니당*/

.footer {
  background-color: white;
  text-align: center;
  padding: 20px 0;
}

/**/

글자간 간격을 생성하는것인데, letter-spacing을 쓰면 우측에 무조건 간격을 생성. 보는이로 하여금 중앙정렬이 맞지 않는다는 느낌을 줄수 있기에 text-indent를 동일한 사이즈로 주면 가운데 정렬이 잘 맞음.

but! 폰트 사이즈가 커져도 지정된 10px만 간격을 만드는거라 어색할수 있음 . 따라서

'em'으로 지정해주자~ 0.5em은 폰트사이즈의 50%사이즈를 뜻함.

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