제로베이스 2주차 TIL (css 애니메이션 + 핵심 html/css/Sass)

벌써 2주차 WIL이다!

저번주에 비해 적응이 되었는지 학습관리는 비교적 수월하였다.

나는 매일 그날의 주제 1가지를 정하고, 그 주제 집중 학습(+다른 건 간단히 추가학습)하는 방식이 잘 맞는 것 같다.

매주 보는 CS퀴즈는 1~4주차 중 1회만 절반이상 맞추면 통과라고 한다.

저번주에 절반 이상은 맞추었기에 비교적 맘편히 봤던 것 같다.

저번주와 이번주 모두 문제 중 몇개는 전혀 모르는 내용이었지만, 네트워크나 자료구조 외에는 교양처럼 듣고 있어 크게 스트레스 받지 않으려 한다. (그래도 구글링을 통한 오답노트는 빠짐없이 작성하자!)

이번주 회고와 함께

몇가지 학습내용에 대해 정리해보았다.

css 애니메이션_modal

  <body>
    <h1 id="heading">제목</h1>
    <p>내용</p>
    <button>수정</button>
    <button onclick="openmodal()">삭제</button>

    <div class="modalDiv">
      <div class="bg" onclick="closemodal()"></div>
      <div class="modal">
        <p>정말 삭제할건가요?</p>
        <button onclick="closemodal()">취소</button>
        <button>삭제</button>
      </div>
    </div>
    <script>
      function openmodal() {
        var modal = document.querySelector(".modalDiv");
        modal.style.display = "block";
      }
      function closemodal() {
        var modal = document.querySelector(".modalDiv");
        modal.style.display = "none";
      }
    </script>
  </body>
</html>

bg에도 클릭시 closemodal을 줌으로써

취소버튼이나 모달창바깥(배경)을 클릭하면 모달이 닫히도록 구현하였다.

+ dry하게 반복코드 줄이기(인자활용)

 <body>
    <h1 id="heading">제목</h1>
    <p>내용</p>
    <button>수정</button>
    <!-- <button onclick="openmodal()">삭제</button> -->
    <button onclick="modalopenNclose('block')">삭제</button>

    <div class="modalDiv">
      <!-- <div class="bg" onclick="closemodal()"></div> -->
      <div class="bg" onclick="modalopenNclose('none')"></div>
      <div class="modal">
        <p>정말 삭제할건가요?</p>
        <!-- <button onclick="closemodal()">취소</button> -->
        <button onclick="modalopenNclose('none')">취소</button>
        <button>삭제</button>
      </div>
    </div>
    <script>
      // function openmodal() {
      //   var modal = document.querySelector(".modalDiv");
      //   modal.style.display = "block";
      // }
      // function closemodal() {
      //   var modal = document.querySelector(".modalDiv");
      //   modal.style.display = "none";
      // }

      function modalopenNclose(인자){
        var modal = document.querySelector(".modalDiv");
        modal.style.display = "인자";
      }

핵심html/css강의는 딱 내가 원하던 강의였다!!!

친절하고 꼼꼼한 설명으로 이해하기 쉬웠다. 처음 시작한다면 지니쌤강의를 먼저 듣는 것도 좋을 것 같다. 헷갈리는 개념이 있을때 해당 파트를 찾아서 복기하는 방식으로 듣기에도 좋았다.

가장 유용했던 내용을 몇개 손꼽아보자면

시멘틱태그, 단축키, position에서 stickey에 대한 내용이었다.

▶시멘틱태그

1.검색 엔진 최적화(SEO) : 컴퓨터가 읽기에 어떤 목적을 가진 태그인지 시멘틱태그로 표시되어있으면 빠르게 이해하고 읽어낼 수 있음.

2. 접근성: 특정 목적으로 쓸 태그를 찾아야 한다거나 사용해야 할때 쉽게 접근할 수 있다.

3. 유지보수: 개발자가 유지보수를 할때, 특정 목적의 태그를 찾아 고치기가 쉬움.

전부 div태그로 구성하는 것보다

header나 article,figure 등 시멘틱태그를 사용하면 어느 위치에 있는 내용인지 확인이 쉽기에 유용하게 사용할 수 있다.

▶단축키(HTML Emmet )

자동완성: tab키	div(tab키 누르기)	<div></div>
텍스트마크업: {}	div{내용}	<div>내용</div>
자식(하위)요소: >	div>p	<div><p></p></div>
형제요소: +	div>p+a	<div> <p></p> <a href=""></a> </div>
요소 바깥으로 : ^	div>p^div	<div> <p></p> </div> <div></div>
반복갯수: * 그룹화: ()	ul>(li>a)*3	<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
넘버링: $	div.item$*5	<div class="item1"></div> <div class="item2"></div> <div class="item3"></div> <div class="item4"></div> <div class="item5"></div>
속성입력: [attr]	div[style]	<div style=""></div>
클래스:.	div.name	<div class="name"></div>

(CSS Emmet )

mt10 (tab키 or Enter키)	margin-top: 100%;
w100% (tab키 or Enter키)	width: 100%;
h100p (tab키 or Enter키)	height: 100%;
bd (tab키 or Enter키)	border: 1px solid #000;
bgc (tab키 or Enter키)	background-color: #fff;
fsz10 (tab키 or Enter키)	font-size: 10px;
z10 (tab키 or Enter키)	z-index: 10;

▶Position

relative	보여지는 브라우저 창 기준
absoulte	상위 (부모)태그 기준
fixed	고정값
sticky (+top)	html상 위치 유지하다가, 스크롤 내려가면 top의 값대로 고정

-sticky 예제

    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore fuga
      neque necessitatibus saepe autem. Iusto distinctio perferendis dolor
      expedita repudiandae illo, voluptatum aperiam unde veritatis blanditiis
      minima facilis cumque doloribus!</span
    >
    <div class="st-line" style="background-color: blue"><span>234</span></div>
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore fuga
      neque necessitatibus saepe autem. Iusto distinctio perferendis dolor
      expedita repudiandae illo, voluptatum aperiam unde veritatis blanditiis
      minima facilis cumque doloribus!</span
    >
    
    
    /*CSS*/
 .st-line {
  position: sticky;
  top: 0;
}

Lorem 사이에 존재하다가

스크롤을 내리면

top:0 의 값대로 가장위에 고정된다.

+) sticky를 준 요소가 양옆끝이 비어있어 뭔가 싶었는데, body태그에 padding과 margin 때문이었다. 이를 0으로 설정하면 해결된다.

Sass

기존의 css와 달리 '미리 변수나 함수로 지정해서 사용하는 sass라는 방식이 있다' 정도만 알고 있었고

sass를 사용해보는 건 처음이라 약간 긴장(?)이 되기도 하고, 적용해보고 싶던 방식이라 학습에 앞서 설레기도 하였다!

먼저 개념이해를 위해 빠르게 한번 듣고, 따라 치며 공부하였다.

명확하게 지정을 하고 사용을 하다보니 나중에 css가 꼬일 일도 적고 정확한 느낌이라서 좋았다.

하지만 그만큼 생각해서 만들어내는 작업과 파일의 수가 늘어나기도 해서 오히려 복잡해지나..?라는 느낌도 있었다.

sass를 사용할 때 보통 sass 7-1Layer 구성을 사용하는데, 그 7가지를 항상 전부사용하진 않고, 필요에 따라 쓴다.

네이버 주문페이지 클론코딩에서는 아래 4가지 구성을 사용하였다.

1.abstracts(초록)

variables_color.scss : 해당 프로젝트에서 사용할 컬러팔레트. 컬러를 변수명으로 지정해 사용함(보통 디자인팀에서 제공하는 경우 쓰는 듯.)
variables.scss : 각종 페이지에서 공통으로 사용할 변수로 지정해 모아둔파일. 폰트, 모바일상패딩값 .. 등

2. base(기본설정코드들)

reset.scss: 특정태그에 기본적으로 있는 스타일(padding이나 margin등)을 없애 reset시켜놓는 용도. window외에 io나 firefox브라우저에서도 거의 같은 화면을 나타내도록 설정(moz,,등) ==> normalize.css 나 reset.css로 검색해 나오는 보일러 플레이트 코드 참고하여 내 프로젝트에 맞게 사용함.
preset.scss (개발자 필요에 따라 만듦) : 갠적으로 자주 사용하는 스타일을 클래스로 묶어놓은 것.

3. components

리액트의 components 처럼 header, menu_item 등으로 파일을 나눠 scss를 작성해놓음.

4. pages

styles.scss: abstracts, base, components 폴더의 파일들처럼 미리 작성해놓은 scss묶음파일들을 import하여 styles.css로 변환시켜주는 곳 같다. scss를 새로 만들었다면 이곳에 꼭!!! import하여 사용될 수 있게 하기 ☆★
특정 page에 대한 scss를 작성하기도 한다.

+hint) 파일명 앞에_ 를 적어 어딘가에 import 해야하는 파일임을 나타냄! 위 파일들 중 styles.scss을 제외하곤 다 import해야하기에 파일명앞에_작성함.(@import 파일명 시에는 _ 생략해도 컴파일됨)

잡담! -sass를 사용하면서 궁금했던 점 & 흥미로웠던 점

scss파일에서 수정한 게 반영이 안되는 걸 발견했다. 파일 컴파일을 다시해야하는 건가 싶은데, 일단 변환되어 생성된 css파일에서 수정하니 바로 적용되는 것을 보았다. scss파일이 수정되면 원래 다시 컴파일이 필요한 듯하다!

저작자표시 비영리 변경금지 (새창열림)

'주간 학습일지' 카테고리의 다른 글

6주차 TIL_미션과제 제출, js학습 (0)	2023.04.16
5주차 TIL_복습 그리고 AWS (0)	2023.04.10
4주차 TIL _ 한달 간의 학습 되돌아보기 +남은 5개월간의 학습계획 (0)	2023.04.03
제로베이스 1주차 TIL_(html/css 기초, CS-컴퓨터구조) (4)	2023.03.12

Learning Notes

제로베이스 2주차 TIL (css 애니메이션 + 핵심 html/css/Sass)

css 애니메이션_modal

▶시멘틱태그

▶단축키(HTML Emmet )

(CSS Emmet )

▶Position

Sass

잡담! -sass를 사용하면서 궁금했던 점 & 흥미로웠던 점

'주간 학습일지' 카테고리의 다른 글

댓글

티스토리툴바

제로베이스 2주차 TIL (css 애니메이션 + 핵심 html/css/Sass)

css 애니메이션_modal

▶시멘틱태그

▶단축키(HTML Emmet )

(CSS Emmet )

▶Position

Sass

잡담! -sass를 사용하면서 궁금했던 점 & 흥미로웠던 점

'주간 학습일지' 카테고리의 다른 글

관련글

댓글

티스토리툴바