position의 특성 추가/ 상태디자인과 가상요소,가상클래스 선택자/ background 속성 및 lineheight

Minllagher·2021년 3월 17일

CSS html

HTML / CSS

목록 보기

5/10

2020-07-17

Position의 특성 추가내용

1. Position : static

: Normal Flow-> 마크업 순서대로 흘러가는 일반 흐름 요소들의 position속성 기본값이다.

2. Position : Absolute

: 예를들어 p태그(하늘색 상자)에 Absolute를 설정해주면, 본인이 위치해 있던 영역에서의 자신의 넓이를 잃어버리고(컨텐츠의 넓이만 유지한채) p태그의 다음에 오는 요소들이 p태그가 있던 영역을 차지한다. 아래그림과같이

)

p는 본래 있던 자리에 layer로써, 위에 부유하게 된다. 크기값(width,height)을 주지 않은 상태라면 p태그 내부에 있는 콘텐츠의 넓이로 p영역의 넓이가 재조정된다.(float와 유사하다)

offset parent는 offset값을 지정해 준 것이다. (ex-> top:32px left:22px 이런식으로) 이렇게 좌표를 지정해준 것이 offset parent이다. offset값을 주지않은채로 static이외의 position값을 지정하면 자신이 있던 위치에서 layer로 떠오른다(이 상황에서는 자신의 위치의 기준을 잡기위해서 굳이 부모요소들의 position값을 찾으러 탐색하지 않는다.) 그러나 offset을 주면 static이 아닌 부모 요소들을 offset parent를 적용할 기준으로 잡기위해 탐색한다.

.box1{
Position:absolute;
Top:20px;
Left:20px;
}  /* offset이 있으므로 부모요소를 탐색하면서 position값의 기준을 찾는다 */

.box2{
Position:absolute;
} /* offset이 없고 absolute이므로 부모요소 탐색할 필요없이 자신의 원래위치에서 자신이 가진 콘텐츠 만큼의 넓이만을 가지고 위로 떠오르게 된다. */

수업에서 배운 서브메뉴를 이용하여 Absolute특성을 이해하기

위의 분홍색 영역은 position:absolute; 로 설정 되어 있고, 마크업 코드를 보면 absolute의 기준으로 잡을 수 있는 position을 가지고 있는 값이 하얀색인 header영역이기 때문에 분홍색 영역이 기준영역(하얀색 부분인 header) 밖으로 벗어나지 못하는 것을 볼 수 있다.

이 상황에서 white-space:nowrap;을 적용하여 줄바꿈을 어떠한 상황에서도 불허하게 한다면, 기준영역 밖으로 나갈 수 있게 된다. 또한 분홍색 영역의 width를 절대적인 수치로 기입해서 긴 값을 적용시키면 header영역 밖으로 나갈 수 있게 되긴 한다.

위의 상황에서는 분홍색 영역(ul class="sub-menu")이 자신의 absolute값에 대한 position기준을 상위부모요소인 .menu-item에 position:relative를 적용한 상황이다. 자신의 위치값을 .menu-item에 적용하게 되자 위와 마찬가지로 자신의 기준영역이 되는 요소의 범위 이상으로 커지지 못하고 주황색 버튼의 크기에 꽉차게 아래로 늘어지는 형태로 위치하게 되었다. 이렇게 width값과 줄바꿈 속성등에 별다른 값을 주지 않은 기본 속성 값일 때는 영역 밖으로 나가지 못하게 된다. 이러한 특성을 이용하면 원하는 영역 내에서만 서브메뉴가 배치되도록 할 수 있다.

line-height의 특성

1. inline

line-height는 글꼴에 따라서 같은 줄 간격이어도 배치가 안 맞게 되기도 하고, 글꼴에 따라서 inline box내에서의 렌더링 처리도 다르게 된다.
글자크기를 제외한 나머지 영역을 하프 리딩영역(반 행간영역)이라고 하는데, 텍스트를 사이로 두고 위아래로 고르게 나눠진다. 이 특성을 이용하여 텍스트를 수직으로 가운데 정렬되어 보이는 효과를 줄 수 있다. 폰트 크기의 2배가 되는 값을 주면 되기 때문에 line-height:2;등으로 설정해 주면 된다.

상태 디자인

:어떠한 이벤트가 발생했을 때, UI가 변하는 것을 의미한다.(클릭이벤트, 마우스 오버이벤트...)

마크업만으로 상태 클래스를 붙여주고, 해제시켜주어야 자바스크립트 없이 상태디자인을 사용가능하다.->가상 클래스 요소

1) :hover(a 태그에 많이 사용한다. 글로벌이기 때문에 어느 태그에서나 사용이 가능하다.)->한계점:

마우스가 올라가야 활성화 되기 때문에 키보드만을 사용하는 사용자는 쓸 수 없다.

2) :focus :키보드 사용자 까지 생각하면 포커스를 사용한다. 포커싱을 받는영역에 전환효과를 적용해 줄 수 있다.

단, css는 동적영역에서 한계가 있기때문에, hover와 focus영역 동시에 전환효과가 적용된다.

ex)마우스를 a버튼에 올리고 있으면 a버튼에 전환효과 적용, 동시에 b버튼을 키보드 tab을 이용하여 focusing해주면 a,b버튼 모두 동시에 전환효과가 적용이 된다.

이러한 특성이 싫다면 자바스크립트를 사용해야한다.

3) :active(마우스 클릭순간) : 아웃라인이 생기는 경우가 있다.(input type="text"같은 곳에..) 디자인적인 소요때문에 아웃라인을 제거하기 위해서 outline속성값을 0으로 지정해주거나 스크립트 함수인 this.blur()를 사용하기도 한다. 그러나 아웃라인이 없으면 키보드 사용자들이 현재 포커스가 어느 부분이 active된 것인지 알 수 없는 경우가 생기기 때문에 특별한 이유가 아니라면 그대로 두는것이 좋다.

대신 디자인적으로 조화롭게 수정하도록 하자.

4) :link(방문 전 상태), :visited(방문 후 상태)

가상요소 선택자

: 가상의 요소를 추가하여 html에 직접 마크업하지 않아도 여러가지 요소들을 추가할 수 있게 해준다.
```
가상요소 선택자        
.menu-act .btn-menu::after{
  ...
}
```
버튼요소 내부에 위치하는 마지막 자식노드를 생성한다. content:"상자";로 콘텐츠를 추가해 주는데 이렇게 생성된 것은 inline의 특성을 가진 익명의 상자로 부른다. 가상요소선택자로 생성해주기 위해서는 반드시 콘텐츠가 필요하기 때문에 기입해야한다. 원하는 레이아웃을 만들기 위하여 display:block로 속성을 변경해서 사용 하기도 한다.

block이기 때문에 원래 내부의 요소 다음단락으로 배치되고 , 대신 부모요소의 패딩영역을 제외한 영역만큼을 차지하며 배치된다.

아래의 예로 가상요소선택자의 배치 위치와 영역 특성 이해하기

Background속성

1) background-position

pixel과 %로 원하는 위치만큼 이동시켜 줄 수 있다. 둘간의 차이는 아래와 같다.

2) multi-background

멀티 백그라운드 규칙은 기존의 상자의 배치와 다르다.

기존상자의 배치에서는 z-index값이 같을경우에는 나중에 배치된 상자가 위로 올라오게 된다. background속성에서는 마지막에 선언해 줄수록, 아래로 깔려 보이지 않게된다. 특히 색깔은 반드시 나중에 선언해줘야 한다.

구체성 단위 (명시도;specificity)

: 브라우저가 어느 요소와 가장 연관된 속성인지를 찾는 수단이며, 이를 토대로 찾은 속성이 해당 요소에 적용된다.

우선순위	1, 구체성(0,1,0,0)	2, 구체성(0,0,1,0)	3, 구체성(0,0,0,1)
종류	id (#content,#footer)	클래스선택자(.box), 속성선택자([type="radio"]), 가상 클래스 선택자(:hover)	유형선택자(h1,div, span, em......), 가상요소 선택자(::after,::before)

!important는 예외로 가장 우선순위를 갖는다.
inline스타일은 구체성이 매우 크기때문에 반드시 필요한경우에만 사용한다.
구체성이 같을경우에는 나중에 선언된 요소가 우선순위를 갖는다.

기타

브라우저에서 키보드 위의 특수문자(%,&,^,*)등을 입력할 때, 그대로 입력해주면 렌더링이 되지않는다.

& = & , & nbsp =공백(세미콜론을 추가해야한다.)

nbsp(none breaking space)
html은 다중스페이스를 지원하지 않아서 스페이스를 100번 눌러도 한칸짜리 공백으로 렌더링된다.
통화기호(달러,엔,원)은 entity로 입력하길 권장한다.

링크참고:https://www.w3schools.com/html/html_entities.asp
letter-spacing 요소는 글자간의 간격을 조절해준다.
word-spacing 요소는 단어간의 간격을 조절해준다.

글꼴

serif 계열: 바탕체 궁서체, 날카롭고 삐침이 많다.
san-serif 계열 : 굴림, 돋움 등..반듯하고 삐침모양이 없다.

font-family 선언방식

font-family: 고딕체; /*이렇게만 선언해주면 font-family선언이다.*/
font-family: 고딕체, sans-serif; /*이렇게 하면 고딕체를 지원하지 않을시 sanserif계열에서 한가지를 선택하여 사용하라는 명령이다.*/

어떠한 태그내에서 span태그 없이 텍스트를 입력하면 inline특성을 가진 익명의 상자(anonymous box)가 생성된다.

Minllagher

Frontend Developer

이전 포스트

레이아웃을 위한 이론(position, inline/inline-block)/ 웹 접근성을 높이기 위한 방법(마크업, 스타일)

다음 포스트