2022/05/20

1) 학습한 내용

<link rel="stylesheet" href="./css/style.css"7>

HTML에 CSS 파일을 연결시키면서 적용시키는 것이 가능하다.

• COFFEE
• MENU
• MENU
• ORDER

여기서 메뉴창을 만드는 코드는 아래와 같다.

<style>
  header nav ul{display: flex; justify-content:end; list-style: none;}
  header nav ul li{margin: 10px;}
</style>
<header>
  <nav>
    <div>Coffee House</div>
    <ul>
      <li><a href="#">COFFEE</a></li>
      <li><a href="#">MENU</a></li>
      <li><a href="#">MENU</a></li>
      <li><a href="#">ORDER</a></li>
    </ul>
  </nav>
</header>

이건 과제에 제출해야 할 코드 중의 하나이지만 학습과 관련이 있기 때문에 여기에 올려보았다.
아래의 코드는 오늘 수업에 사용된 코드 중의 일부이다. 그 전에 여기에 사용된 것 중에 justify-content에 대해서 작성하면 다음과 같다.

margin

justify-content 정의

기본축의 양쪽 끝단을 기준으로, 아이템을 어떻게 균등 배분 정렬할지 결정.

※ 기본축과 그 시작점은 flex-direction 속성의 속성값에 따라 결정됨.

1. align-items 속성 : 교차축 기준으로 아이템을 정렬.

2. 기본값: flex-start
   상속여부: X
   애니효과: X
   CSS버전: CSS3
   JS구문: object.style.justifyContent="space-between";

3. IE11 이상, 주요 최신 브라우저 지원.

   justify-content 구문

selector {justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;}

속성값

flex-start

컨테이너 기본축 앞단에 아이템 배치. (※ 아이템 순서는 유지.) (기본값)

※ flex-direction 속성값에 reverse 추가된 경우, 역으로 끝단을 기산.

flex-end

컨테이너 기본축 끝단에 아이템 배치. (※ 아이템 순서는 유지.)

※ flex-direction 속성값에 reverse 추가된 경우, 역으로 앞단을 기산.

center

컨테이너 기본축 중단에 아이템 배치. (※ 아이템 순서는 유지)

※ 중앙에 안 오면, 부모 요소를 100% 설정 후 부모 요소나 해당 요소의 padding 값 수정.

space-between

컨테이너 기본축 기준 + 아이템 사이에만 공백 추가 + 아이템 양쪽 끝은 컨테이너에 붙임.

space-around

컨테이너 기본축 기준 + 아이템 둘레에 공백 추가 + 아이템 사이 공백 너비가 아이템 끝 공백 너비의 2배.

space-evenly

컨테이너 기본축 기준 + 아이템 사이에 공백 추가 + 아이템 사이든 끝이든 동일 너비의 공백. IE 지원 X

initial

이 속성의 기본값으로 설정.

inherit

부모요소의 속성값 상속.

브랜드직영관에선 최대 10% 적립

위의 글에 작성된 코드는 아래와 같다.

<style>
.shop-title-border{
    position: relative;
    top:50%;
    transform: translateY(-50%); /*세로 가운데 정렬 */
    padding: 2px 4px;
    display: inline-block;
    border:solid 1px black;
    color: #black;
</style>
<h3 class="shop-title-border">브랜드직영관에선 최대 10% 적립</h3>

inline-block

inline-block의 특징은 다음과 같다.

1. 줄바꿈이 이루어지지 않는다.
2. block처럼 width와 height를 지정 할 수 있다.
3. 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

2) 학습내용 중 어려웠던 점

이번에 가장 힘든 것은 그간 수업에 시키는 대로 하다가 이번에는 과제를 통해서 웹페이지를 만들어내야 하는 때이다. 수업이야 따라하거나 강사가 주는 코드를 통해서 수정을 할 수 있다 하더라도 이번에는 내가 직접 코드를 입력하고 제시한 문제와 웹페이지 모습을 직접 만들어야하는 상황이 있을때다.

3) 해결방법

이번에는 나는 구글링을 통해서 적용시켜야 할 HTML구조와 CSS를 알아봐야 했었다.

4) 학습소감

내일은 AZ 900 시험을 치는 날이다. 다음 주부터는 velog를 매일 작성해야 할 것이다.