[CSS] 잊지말아야하는 CSS 지식 pt.1

1. margin

margin: 인자 1개;

- 네 면 모두 적용

 

margin: 인자 2개;

- 세로 방향, 가로 방향

 

margin: 인자 3개;

- 위, 가로방향, 아래

 

margin: 인자 4개;

- 위, 오른쪽, 아래, 왼쪽

 

음수도 가능하고 퍼센테이지 값도 가능하다. auto 값을 넣을 수 있는데 브라우저가 적절한 여백 크기를 선택하게 할 수 있고 요소를 중앙 정렬하고 싶을 때 사용!

 

2. inline block

인라인 블럭은 인라인처럼 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만, 블럭처럼 width와 height 지정이 가능.

내가 헷갈린 지점은 span은 또 뭐지 였는데 span은 마크업이고 기본 속성으로 inline 특성을 갖는다. 하지만 css에서 display 값을 조정하여 특성을 변경할 수 있다.

 

3. pseudo selector(:active, :hover, :focus)

사실 hover와 focus가 헷갈려서 작성하는데 active도 있길래 같이 작성한다.

 

:hover

가상 셀렉터 호버는 마우스가 해당 요소 위에 있을 때 스타일 변경

 

:active

마우스가 해당 요소를 클릭하는 순간부터 뗴는 순간까지 스타일 변경

 

:focus

마우스가 해당 요소를 클릭하면 요소 스타일 변경

 

4. html, css에서 띄여쓰기는 ,와 같고 별개의 요소로 취급하게 해주는 구분자이다.

이것 때문에

<div class="panel pricing-table">

 

이것 때문 위 라인이 무슨 말인지 헷갈렷다. css에서 panel pricing-table이라는 선택자를 안쓰고 panel만 쓰는데도 왜 이게 되지 했는데 class로 panel과 pricing-table을 동시에 묶어준 것이다. panel 클래스와 pricing_table 클래스가 있는 것이다.

 

 

5. label

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

 

이렇게 작성하면

Do you like cheese? □

Do you like peas? □

나올텐데 실제로 체크 표시가 cheese를 선택한다는 것을 label로 명시하지 않으면 모른다. 쉽게 말해서 텍스트와 체크박스가 어떻게 연결되어 있는지 알려주는 것이다. 잘못 설정하면 cheese가 좋다고 했는데 컴퓨터 내부값은 peas가 좋다고 나올 수 있는 것이다. label for 값으로 input의 id와 연결지어 치즈가 좋다고 선택했을 때 내부적으로 치즈값이 출력되도록 한다.

 

6. query

미디어 쿼리를 찾아보다가 그럼 쿼리는 뭘까라는 생각이 들었다.

 

A query is a request for data or information from a database table or combination of tables. (techtopia)

 

데이터나 정보의 대한 요청이라고 한다. 기본적인 것들을 물어보고 파헤쳐보니 조금씩 뭔가 이해되는 것 같다.

 

7. media query

그럼 미디어 쿼리는 뭘까? 여기저기 찾아보면 기능과 활용에 대한 설명은 나와있지만 정의가 나와있는 경우가 적었다. 물론 없는 것은 아니지만 왠만한 기능 한번 치면 나오는데 이건 두번 쳐서 나오는 정도? 

 

Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. (mozilla)

 

A media query is an HTML/CSS functionality that allows the content of a Web page to adapt to the type of media that the page is being rendered in, such as a computer screen or that of a phone or tablet. (techtopia)

 

미디어 쿼리는 기능인데 웹페이지의 정보를 다양한 타입의 적응하도록 만들어주는 기능이다. 

 

8. min-width, max-width

사실 6번과 7번은 이 속성 때문에 찾게 되었다. 최소 가로 길이, 최대 가로 길이인데 헷갈린다.

min-width: 1000px이면 1000px이상이면 그 아래 코드를 적용한다. 모바일 기준으로 먼저 만들고 pc 화면을 고려하는 것이다.

 

max-width: 1000px이면 1000px이하 일 경우 그 아래 코드를 적용한다. pc를 만들고 그 아래 크기인 모바일을 만들 때 사용한다.

 

9. transition, shorthand property

transition은 CSS transitions allows you to change property values smoothly, over a given duration. (w3school) 이라고한다. 특성 값을 자연스럽게 지속지간을 주어서 변화시키게 만드는 기능이다.

아래와 같은 속성 값을 부여할 수 있다. 자세한건 직접 써보는 것이 빠를 것 같다.

 

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end

 

그리고 transition을 찾아보면 shorthand property라고 나온다. shorthand property는 아래와 같다.

 

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. (mozilla)

 

여러개의 CSS 특성의 값을 동시에 설정할 수 있도록 하는 특성이다.

 

For instance, the CSS background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position. (mozilla)

 

예시를 보면 더 잘 이해된다. background 특성은 색깔, 이미지, 위치를 동시에 정의할 수 있다.

 

10. line-height

이상하게 가끔 쉬운게 단번에 이해 안되는 경우가 있다. 내 경우가 이 것이다. 줄간격을 의미한다.

 

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text.

 

오늘 뭔가 많이 배운 것 같아서 뿌듯하다.