이종찬 강사님 CSS 특강 | 행복하DA

✨ CSS는 무엇인가

 html을 웹페이지를 구성하는 뼈대라고 구성한다면 css는 그 뼈대에 덧입혀지는 살거죽이라고 부를 수 있겠다. 또한 꾸미기 요소로 이루어진 요소로서 Cascading Style Sheet라고 부르며 말 그대로 계단식으로 하나하나 쌓아 올라가며 html을 꾸미는 언어라고 보면 된다.

 과거 애매한 기간동안 퍼블리셔로 일하기 시작할때, 내가 코딩에 확 눈을 띄게 된 계기도 css로 작업하는 코딩 결과물들이었다. css 스타일링 작업은 진짜...진짜 완전 재미있다. 내가 만들어놓은 구조에 이거저거 올리면서 그게 또 바로바로 변하는 모습을 볼 수 있으니 코딩입문자들에게 배우기에 정말 적합한 웹언어가 아닐까 싶을 정도.

 오늘은 특강 명사님으로 빔캠프의 이종찬(https://www.youtube.com/c/veamcamp)님께서 강의해주셨다. 그리고 강의를 듣고난 후의 평은... 종찬교의 신도자 추종자로서 하루빨리 커피챗이든 팬미팅이든 그저 종찬님을 만나뵙고 싶을뿐... 사실 어느정도 알고 있는 내용이라 띄엄띄엄 들어야겠다 싶었던 오전의 내 마음가짐에 망치를 던져서 제대로 처음부터 똑바로 보라고 말해주고 싶었을 정도. 정말 시간가는줄 모르고 css기본에 대해서 다시한번 다잡고 갈 수 있었다.

 

 

✨ 특강 요약

• css에서 선택자를 말하는 것은 type selector라 부름.
  • 선택자 안의 요소 : property | 값 : value
  • 선택자의 width 값이 지정 안되어있으면 부모요소 width 기준으로 가특차게 됌. 표현은 100%라 볼 수 있지만 '가득찬다'라고 표현하는것이 옳음
• width값이 오른쪽부터 줄어드는 이유 : 코딩은 영어권식이 기본, 문자읽을때 왼 > 오른순으로 읽기 때문.
• 블럭요소의 가로는 자신의 공간이 맞지만 세로는 다음 element의 공간이기때문에 온전히 내 공간인 가로값만 정렬이 가능.
  • margin값의 left값을 auto라 주면 해당 요소의 left공간은 내 영역이라 선언하며 화면비율에 맞춰서 요소를 right쪽으로 쭉 땡겨와서 margin값을 생성. 반대의 경우도 마찬가지로 right값의 값을 생성하면 margin의 left, right값이 auto로 중첩이 된다. 두 값이 중첩으로 인해 해당 요소의 width값은 자연스럽게 가온데 정렬이 됌.
• margin 겹침 현상
  • 부모요소와 자식요소에 각각 margin값이 들어가있으면 가장 큰 값에 작은요소가 겹쳐져서 어느 한쪽의 margin값이 씹혀버리는, 일명 'margin 겹침 현상'이 일어난다. 일명 박스컨텐츠마다 'H'모양의 예쁘지 않은 현상이 일어남.
  • 해당 현상을 없애려면 여러가지 방법이 있으나 가장 유명한 방법으로는 인터넷 익스플로러를 고려하기도 한 방법으로 부모요소의 css값에 'overflow:hidden'값을 주면 해결이 가능. 그리고 빌어먹을 익스플로러가 멸망한 세상부터 전역으로 사용 가능한 미래지향적인 요소로는 'display: flowroot' 방법이 있다.
• selector의 우선순위(specifishity) 결정
  • class는 2개이상 사용이 가능, id는 한개밖에 설정하지 못함.
  • 클래스끼리 붙여서 쓰면 강조의 의미가 있어서 일반 클래스 선언보다는 우선순위가 상승한다. 단 클래스 사이를 띄워쓰면 자손요소를 호출하는 의미가 되므로 주의.
  • 우선순위의 생태계 파괴는 최우선순위 !important가 있다(아래 그림 참조). 그러나 정말 중요한 요소에 쓰는것 말고는 클래스를 여러개 이어서 호출하여 강조하는것을 더욱 추천함. 

우선순위 파괴자 !important

• image-sprite
  • 이미지 로딩속도 개선을 위해서 이미지를 하나하나 불러오는것이 아닌, 이미지 하나에 여러가지의 주요 이미지들을 프라모델 러너마냥 겹치지않게 붙여놓고 html 로딩시 한꺼번에 불러와서 위치값만 조정하며 이미지를 로드하는 기법.
  • 이미지는 기본적으로 큰 해상도의 이미지를 사용하며 css등으로 크기를 조절함.
  • 웹성능을 위해 srcset 사용이 권장.
• Semantic Mark-up
  • 적절히 사용하면 식별하기에 매우 좋은 코드가 됨.
  • univarsal selector ("*") 로 margin,padding 을 0px로 초기화를 하여도 상관없음.