실습 - HELBAK

40286 단어 클론코딩대구AI스쿨CSS실습htmlCSS

📌학습내용

실무 팁
(1) * { }: 모든 html 태그에 { } 내의 속성값 적용 가능
(2) CSS 작업할 때 html, body { width: 100%; height: 100%; } 디폴트로 넣어주기
(3) y축 중앙 정렬 공식

position: relative;
height: 오브젝트 높이값;
top: 50%;
transform: translateY(-50%);

(4) 1em = 16px
(5) class별로 역할을 명확히 구분할 것
(6) class 나열할 때 붙여 쓰는 것과 띄어 쓰는 것의 차이
— .payment-icon .one: payment-icon의 자식인 one을 선택
— .payment-icon.one: 여러 payment-icon 중 one이라는 클래스를 갖고 있는 payment-icon을 선택
(7) a href=" "안에 들어갈 수 있는 것: URL / html문서명 / id명
(8) 긴 텍스트 입력할 때 적용할 수 있는 속성
— overflow: hidden;: 공간을 벗어나는 텍스트는 보이지 않게 함
— white-space: nowrap;: 자동 줄바꿈을 해제함
— text-overflow: ellipsis; : 공간을 벗어날 때 문장에 줄임표 생성
(9) 특정 속성에 대한 class를 미리 세팅해두고 html에서 바로 적용하면 쉬운 협업과 유지보수가 가능함

💡 실무 팁(9)
📎CSS

      .text-box {
          width: 200px;
          height: 200px;
          background-color: yellow;
      }

      .ellipsis {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      h1 {
          background-color: pink;
      }

      h2 {
          background-color: gray;
      }

📎html

        <p class="text-box ellipsis">
            우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐 
            우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐 
        </p>

        <h1 class="ellipsis">
            우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐 
            우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐  
        </h1>

        <h2 class="ellipsis">
            우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐 
            우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐  
        </h2>

• 그 외 흔히 속성값 적용을 위해 쓰는 class명
— .m-t/b/l/r-00: margin-top/bottom/left/right: 00px;
— .p-t/b/l/r-00: padding-top/bottom/left/right: 00px;

📖 HELBAK

⭐ 모바일 버전 작업이 선행된 사이트

💡 CSS 세팅

      * {
          margin: 0;
          padding: 0;

          box-sizing: border-box;
      }

      html, body {
          width: 100%;
          height: 100%;
      }

      body {
          overflow-x: hidden;

          font-family: sans-serif;
          color: #585858;
      }

      h1, h2, h3, h4, h5, h6, p {
          font-weight: 400; /* 100~900까지 100 단위로 올라감 */
      }

      li {
          list-style: none;
      }

      a {
          text-decoration: none;
      }

      img {
          vertical-align: middle;
      }

      span {
          display: block; /* 실습 사이트의 레이아웃 특수성 때문에 넣어줌 */
      }

📖header

💡 설계
📎html

	<header id="header">
		<h1>
			<a href="#" class="logo">
				<img src="https://via.placeholder.com/186x18">
			</a>
		</h1>

		<nav class="buttons">
			<ul>
				<li>
					<a href="#" class="menu-button">
						<img src="http://via.placeholder.com/22x20">
					</a>
				</li>
				<li>
					<a href="#" class="menu-button">
						<img src="http://via.placeholder.com/22x20">
					</a>
				</li>
				<li>
					<a href="#" class="menu-button">
						<img src="http://via.placeholder.com/22x20">
					</a>
				</li>
			</ul>
		</nav>
	</header>

📎CSS

        #header h1 {
            background-color: #ffffff;
        }

        #header h1 .logo {
            position: relative;
            display: block;

            width: 100%;
            height: 65px;
            background-color: yellow; /* 영역 시각화 */
        }

        #header .logo img {
            position: absolute;

            top: 0;
            margin-top: 23px;

            left: 50%;
            margin-left: -93px;
        }

        #header .buttons ul {
            overflow: hidden; /* float 자식의 높이값을 부모가 인식할 수 있음 */	
        }

        #header .buttons li {
            position: relative;
            float: left;

            width: 33.33%; /* 3등분 */
            height: 65px;
            /*border: solid 5px red*/ /* 영역 시각화 */
        }

        /* a 태그를 li 전체에 걸치도록 적용하기 */
        #header .buttons .menu-button {
            display: block;  a 태그는 inline 요소이기 때문에 block으로 바꿔줌 

            width: 100%;
            height: 100%;
            text-align: center; /* x축 중앙 정렬:  inline, inline-block에만 가능 */
        }

        #header .buttons li:nth-child(1) .menu-button {
            background-color: lightgray;
        }

        #header .buttons li:nth-child(2) .menu-button {
            background-color: darkgray;
        }

        #header .buttons li:nth-child(3) .menu-button {
            background-color: gray;
        }

        #header .buttons li .menu-button img {
            position: relative;
            height: 20px;

            top: 50%;
            transform: translateY(-50%);
        }

💡 header PC 버전

        @media (min-width: 47em) {
            #header {
                position: fixed;
                width: 100%;
                height: 80px;

                top: 0;
                left: 0;

                z-index: 99999;
            }

            #header h1 {
                width: 50%;
            }

            /* 클릭이 쉬운 PC버전은 의도치않은 이동을 방지하기 위해 클릭 범위를 한정시켜 줌 */
            #header h1 .logo {
                width: 280px; 
                height: 80px;
            }

            #header .logo img {
                margin-top: 30px;
            }

            #header .buttons {
                position: absolute;
                width: 50%;
                /* absolute만 적용해주면 width 인식 못 하기 때문에 꼭 값을 줘야함 */

                left: 50%;
                top: 0;
                /* 배치 방법이 특이한 편 */
            }

            #header .buttons li {
                height: 80px;
            }
        }

📖main

💡 설계
📎html

          <main role="main" class="main-content">
              <ul class="product-group">
                  <li>
                      <a href="#" class="product-group-link">
                          <article> 
                              <!-- article에는 title 필요 -->
                              <h2 class="link-text">Product 1</h2>
                              <img src="http://via.placeholder.com/1000x563">
                          </article>
                      </a>	
                  </li>
                  <li>
                      <a href="#" class="product-group-link">
                          <article> 
                              <h2 class="link-text">Product 2</h2>
                              <img src="http://via.placeholder.com/1000x563">
                          </article>
                      </a>	
                  </li>
                  <li>
                      <a href="#" class="product-group-link">
                          <article> 
                              <h2 class="link-text">Product 3</h2>
                              <img src="http://via.placeholder.com/1000x563">
                          </article>
                      </a>	
                  </li>
                  <li>
                      <a href="#" class="product-group-link">
                          <article> 
                              <h2 class="link-text">Product 4</h2>
                              <img src="http://via.placeholder.com/1000x563">
                          </article>
                      </a>	
                  </li>
              </ul>
          </main>

📎CSS

        .main-content .product-group-link {
            position: relative;
            display: block;

            /* 공간 크기를 이미지 크기와 비슷하게 맞춰줌 */
            width: 100%;
            height: 56.25%;

            overflow: hidden;

            border: solid 5px black;
        }

        .main-content .product-group-link img {
            width: 100%;
            height: 100%;
        }

        .main-content .product-group .link-text {
            position: absolute;

            left: 25px;
            bottom: 25px;

            color: black;
            font-size: 25px;
        }

💡 main PC 버전

        @media (min-width: 60em) {
            .main-content {
                overflow: hidden;
            }

            .main-content .product-group-link {
                float: left;
                width: 50%;
                height: 28.125%;
            }
        }

• main 상단 header와 겹치는 부분 빼주기

        @media (min-width: 47em) {
            .main-content {
                padding-top: 80px; 
                /* header 높이만큼 padding 적용 */
            }
        }

📖footer

💡 설계
📎html

      <footer id="footer">

          <nav class="left-nav">
              <ul>
                  <li><a href="#">Terms and conditions</a></li>
                  <li><a href="#">Cookies</a></li>
              </ul>
          </nav>

          <nav class="right-methods">
              <h3>Payment Methods</h3>
              <ul>
                  <li><span class="payment-icon one"></span></li>
                  <li><span class="payment-icon two"></span></li>
                  <li><span class="payment-icon three"></span></li>
                  <li><span class="payment-icon four"></span></li>
                  <li><span class="payment-icon five"></span></li>
              </ul>
          </nav>

          <a href="#" class="to-top-button"></a>
      </footer>

📎CSS

        #footer {
            position: relative;
            background-color: powderblue; /* 영역 시각화 */

            padding-bottom: 66px;
        }

        #footer .left-nav {
            padding-top: 20px;
            text-align: center;
        }

        #footer .left-nav li {
            padding: 5px 0;
        }

        #footer .right-methods {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 30px;
        }

        #footer .right-methods li {
            display: inline-block;
            padding: 7px 4px;
        }

        #footer .right-methods .payment-icon {
            display: inline-block;

            width: 30px;
            height: 20px;
        }

        #footer .right-methods .payment-icon.one {
            background-color: black;
        }

        #footer .right-methods .payment-icon.two {
            background-color: red;
        }

        #footer .right-methods .payment-icon.three {
            background-color: pink;
        }

        #footer .right-methods .payment-icon.four {
            background-color: blue;
        }

        #footer .right-methods .payment-icon.five {
            background-color: gray;
        }

        #footer .to-top-button {
            position: absolute;
            display: block;

            width: 66px;
            height: 66px;
            background-color: green;

            bottom: 0;
            left: 50%;
            margin-left: -33px;
        }

💡 footer PC 버전

        @media (min-width: 60em) {
            #footer .left-nav {
                float: left;

                width: 50%;
                background-color: yellow;
                text-align: left;

                padding-top: 32px;
                padding-left: 40px;
            }

            #footer .right-methods {
                float: right;

                width: 50%;
                background-color: greenyellow;

                margin: 0;
                padding-top: 32px;
                padding-right: 40px;

                text-align: right;
            } 

            #footer ul, #footer li, #footer h3 {
                display: inline-block;
                vertical-align: middle;
            }

            #footer .left-nav a {
                font-size: 14px;
                padding: 0 5px;
            }

            #footer .right-methods li {
                padding: 0 4px;
            }

            #footer h3 {
                padding-right: 10px;
            }
        }

⭐결과물: mobile ver.

⭐결과물: PC ver.

📌어려운 점

footer PC버전 작업 할 때

	#footer .right-methods {
		float: right;

		width: 50%;
		background-color: greenyellow;

		margin: 0;
		padding-top: 32px;
		padding-right: 40px;

		text-align: right;
	}

위 코드를 입력하면 to-top-button이 아예 위로 올라가버림

개발자도구로 확인하니 아예 footer가 상단에서 잡힌다

📌해결 방법

개발자도구로 검토하니 footer가 main안에 들어가 있었음!
</main>을 닫아주지 않아서 생긴 오류🤦‍♀️

개발자도구 만세😂

📌느낀 점

오류가 나면 원인 찾아서 해결하는 게 꽤 시간이 많이 걸리는구나... 집요함과 끈질김이 개발자의 덕목이라던데 아주 조금은 알 것 같다 ㅋㅋㅋ😭

[JavaScript] 생활코딩 1일차
[CS] 함수 Day-1

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage