22/04/30/토 CSS 강의 복습

220430 Today I learned!

• 스터디 프로젝트
• CSS 강의 복습
• 백준 문제 풀이

---

1. Fact

(1) CSS 강의 복습

• 강의링크
• Section 3: Flex로 반응형 페이지 만들기를 복습 겸 다시 구현

혼자 구현하지 못한 코드

	<!-- modal-switch -->
    <input type="checkbox" id="modal-switch">
		<label for="modal-switch">
      <!-- 이런 텍스트는 안써도 되지만 나중에 접근성을 생각한다면, 살려주는 게 좋다. -->
      <!-- 대신 CSS로 안보이게 처리한다. -->
        <span>modal열고 닫기</span>
		</label>
  
  
		<!-- modal -->
		<div class="modal">
      <div class="dialog">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
        placeat eveniet esse dolorem nihil molestiae iste dignissimos? Ad
        accusantium possimus earum, hic veniam voluptates culpa sapiente, in
        repudiandae dolor quae. Modi numquam eos nesciunt! Cum fugit ipsam quam
        ex, eius ut quod explicabo praesentium quibusdam minus? Voluptatem est
        laudantium fugiat. Alias, molestias ab labore accusamus cumque minima,
        architecto ipsam enim voluptate sunt eos voluptates explicabo iusto eum
        omnis inventore aliquam corporis nesciunt consequatur nemo odit
        voluptatibus excepturi quasi cupiditate! Ratione ab aperiam quisquam
        repellat. Dolorum, voluptate animi, ratione dolore nostrum quis numquam
        delectus provident facilis explicabo maxime ipsum, necessitatibus
        maiores!
      </div>
    </div>

.modal {
  display:none;
  /* 헤더에는 공간을 주지 않기 위함 */
  top:80px;
}


/* ~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택한다. */
#modal-switch:checked ~ .modal {
  display:flex;
}

/* 상단으로 이동 */
/* search form에서 margin-right를 줘서 공간을 배분해준다. */
label[for="modal-switch"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  top:1.3rem;
  right: 1rem;
  width: 40px;
  height: 40px;
}

/* checkbox와 lable에 있는 span태그에 있는 문구를 안보이게 한다. */
/* 스크린 리더, SEO 등의 이유로 display:none;, width:0;등의 사용을 피했다.  */
#modal-switch,
label[for="modal-switch"] span {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  top: 0; 
}

/* 가상 요소로 클릭할 아이콘을 추가한다. */
/* 가상요소로 추가된 "⚑" 또한 라벨이 된다. */
label[for="modal-switch"]:before {
  content: "⚑";
  font-size: 2rem;
}

#modal-switch:checked ~ label[for="modal-switch"]:before {
  color: dodgerblue;
}

modal창을 css로 구현하기

체크박스를 누르면 modal창이 보이게 된다. 라벨과 가상요소를 이용하여 가상요소를 클릭할 시 modal창이 보이게 한다. 가상요소를 제외한 나머지는 사용자에게 보이지 않도록 한다.

(2) 백준 문제 풀이

• 24954 물약 구매

• 문제풀이
• 순열, 구현

2. Feeling

4월 마지막날! 벌써 5월이라니 시간이 정말 빠른 것 같다. 이제 1학기 교육과정의 후반부를 달리고 있다. 1학기는 기초지식을 탄탄하게 쌓고싶다. 작동원리를 이해하고 코드를 구현하고 싶다고 해야하나.. 그런데 이런 지식이 많이 부족한 것 같아서 남은 기간 + 방학동안은 기초를 닦고싶다.

또한, 오늘 반응형 웹페이지를 혼자 구현해보면서 좀 더 공부해야할 부분을 찾았다.

1. CSS 선택자
2. SEO를 고려한 웹사이트 구현 방법

3. Finding

null;

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	pause 🤦‍♀️	잠시 중단!
강의에서 학습한 flex-website 혼자 제작하기	` Success 😎`
1일 1알고! 🔥	in progress 🚀