CSS로 조건부 코드 짜기

 

 

개인적으로 느끼는 파이썬과 CSS의 차이

 

(얼마 안 배웠지만) 파이썬에서는 조건부를 if 또는 for로 구현하곤 했었다. 

 

HTML이나 CSS에서는 파이썬과 같은 문장 느낌의 직관적인 코드 대신 명사 위주가 많다는 게 개인적인 감상. 예를 들어 파이썬에서 = 이 있었다면 여기서는 :이 있는 느낌?

 

파이썬에서는 width가 뭔지 지정해준 후,

if width > 800
	grid(width)

 

하고 들여쓰기 한 뒤 코드를 짜주면 코드가 성립한다. grid() function은 존재하지 않지만 있다고 치자.

 

CSS에서는 유사한 표현을

 

@media(min-width:800px) {
	#grid {
    display: grid;
    }
  }

이렇게 표현한다.

 

굉장히 문장 같지 않고 단어식이다. 파이썬이 조건문을 작성하는 식이었다면, CSS는 선택자를 별도로 지정한다.

 

 

 

 

그리드를 표시하지 않는 방법

 

두 가지 방법이 있는 것 같다.

애초에 이 조건부 하에서만 grid가 작동하도록 하는지,

아니면 특정 조건을 설정하여 여기서는 grid가 작동하지 않도록 설정하는지.

 

내가 쓴 코드에서는 직관적으로 전자를 따랐지만, 나중에 생활코딩을 보니 후자를 따랐다는 것을 알 수 있었다.

 

내가 grid 태그 자체를 조건부로 감싼 것과 달리 (min-width를 씀: 이 조건을 만족시켜야만 그리드로 표시한다), 

이 조건을 만족시키지 않을 경우 (max-width)

display: block (블록 단위로 인식해서 병렬적으로 배치 못 하게 함)

또는 display: none을 써 앞서 쓴 그리드 태그를 무효화하는 식이다.