멋쟁이 사자처럼_1112

jojo·2021년 11월 12일
1기TIL기록멋쟁이사자처럼프론트엔드
2

멋쟁이사자처럼

목록 보기
13/39
post-thumbnail

수업

디자인과 같은지 확인!

디자인과 같은지 확인하다보면, 자간이 다른 경우가 있어서 그건 어떻게 조정하는건가 했더니
letter-spacing을 주는 거였다.

관련 링크: https://developer.mozilla.org/ko/docs/Web/CSS/letter-spacing

나도 한 때 일러스트랑 인디자인을 사용할 때 자간 조정 정말 많이 했는데, 여기에서도 있었군!👩‍💻👩‍💻


CSS 설계기법

  • OOCSS (Objective-oriented CSS)

구조와 스킨을 분리하고, 

구조: 레이아웃에 영향

스킨: 레이아웃엔 영향 x 시각적으로.

컨테이너(부모요소들- 큰 레이아웃)와 컨텐츠를 분리.


본인이 스스로 온전한 css스타일을 구현할 수 있게 짜라. - 모듈화.


css코드를 역할에 따라 분리!

  1. Base Rules

    • 공통 스타일 적용!

  2. Layout Rules

    • 주요 레이아웃은 ID를 준다.

  3. Module Rules

    • 모듈은 ID나, 요소 선택자를 쓰지 않고, class를 준다.
    • 비슷하지만 조금 다르게 줘야할 때는 하위 클래스를 준다.

  4. State Rules

    • 모듈과 비슷하지만 다르다.
      둘다 스타일을 덮어쓰지만, 모듈은 스타일이 적용되면 바뀌지 않는다. 고정!
      스테이트는 자바스크립트에 의존한다. (자바스크립트가 필요로할 때 넣어다 뺐다 할 수 있다.)

  5. Theme Rules

    • 색상과 이미지, 글꼴 등

  • BEM (Block, Element, Modifier)

id랑
요소 선택자 안 쓴다.
(가중치 계산을 원활하게 하려고! z-index값을 10단위로 주는것철머)

  1. Block 클래스 네이밍이 중요하다.- 명확하게(형태설명x 의미중심!)

class="green-box" (X)
class="error-red" (O)

  1. Element
    부모의 클래스 네임이 있으면, 상속 받아야 한다.
    그리고 element의 클래스 이름은 언더바 두개(__)를 붙이고 사용한다.
<ul class="tabnav">
    <li class="tavnav__link">
        <a href="" class="tavnav__anchor">
                탭1
        </a>
    </li>
    <li><a href="">탭2</a></li>
    <li><a href="">탭3</a></li>
    <li><a href="">탭4</a></li>
</ul>

  1. Modifier

    스킨같은 상태, 모습에 대해 클래스 이름 줄 때.
    단독으로 클래스 이름을 사용 안 한다. 두번째 클래스 이름으로 사용해야 한다!

<section class="chapter-baseball">
    <button type="button" class="chapter-baseball__btn  chapter-baseball_active-false"></button>
</section>

생각

오늘은 신촌홍대 스터디에 참가했다. 모여서 수업듣기!
전부 온라인 과정이어서 오프라인으로 함께 공부하는 동기분들을 만날 수 없을줄 알았는데 마침 근처에서 한다고 하길래 참여해봤다:)
물론 수업을 각자 들어야 했기에 교류가 많지는 않았지만, 쉬는 시간과 점심 시간에 이야기 하고, 정보도 공유하면서 이야기 하니까 뭔가 정신적으로 안정적인 느낌이 너무 좋았다!
다들 나보다 잘 하는데(당연함-나는 배운지 2주차니까..!) 열의도 넘쳐서 많이 배울 수 있는 시간이었다. 어려우면 바로 물어볼 수 있고, 함께 공감하면서 같은 주제로 이야기 한다는 것 자체가 너무 재미있고 소중한 시간이었다. 매일매일은 어렵겠지만, 시간이 날 때마다 이렇게 오프라인으로 모여서 수업 듣고, 스터디하는 기회를 갖고 싶다.


느낀점

잘한 점

  • 스터디에 참여한 것!👍 나는 원래 공부는 혼자 하는 것보다, 다른 사람과 함께 하는 것을 좋아한다! 그래도 오프라인으로 나가는 것에 대한 걱정도 있었고, 남을 도울 수 없는 지식 수준 때문에 주저하고 있었는데 그래도 한 번 나가보자! 하고 나가길 잘한 것 같다.

  • 바닐라 JS 챌린지를 신청했다! 난 JS가 뭔지 정말 하나도 모르는데 챌린지라는게 가능한가 해서 주저하고 있었는데, 챌린지를 하면 금방 는다고 하기도 했고, 실제로 비슷한 방식으로 스터디하면서 CSS도 일주일 사이에 많이 늘었기 때문에 도전한다 생각하고 신청했다! 다만 매일매일 해야 해서 그건 좀 걱정이 된다😂😂😂

고칠 점

  • 마크업을 고민하는 시간이 아직 여전히 길다!! 우선 박스를 그려보자고 생각하면서도 어떤 태그를 쓸까 고민하게 되는 것 같다.. 연습이 필요할 듯 하다!

  • 운동을 좀 꾸준하게 해서 체력을 만들어야겠다..!(필수!!)💪


계획

  • 마크업 연습하기! (클론 코딩을 한 번 해보자!)
  • 🏃‍♀️🏃‍♀️🏃‍♀️ 운동!!!!! 🏃‍♀️🏃‍♀️🏃‍♀️
profile
jojo
2021.11~
이전 포스트

멋쟁이 사자처럼_1111

0개의 댓글