개발자로 가는길

탭메뉴를 따라만들면서

1.한줄을 넘치는 글은 줄바꿈되지않고

2. 상자를 넘어가는 글은 숨기고

3.숨겨진 글의 자리는 말줌임표로 채우는 방법을 배워보았다.

1.  white-space: nowrap;

2.  overflow: hidden;

3.  text-overflow: ellipsis;

이 세가지를 같이 써야 위의 이미지와 같은 말줄임표를 만들 수 있다.

1.white-space:nowrap;

white-space란?

화면상으로는 아무것도 표시되지 않는 문자.

스페이스(여백), 탭 문자(tab character:화면이나 인쇄되는 페이지상의 행과 열의 위치 맞춤에 사용되는 문자), 개행(改行) 문자 등 화면상으로는 표시되지 않는 문자를 화이트스페이스라고 한다.

출처: https://www.tabmode.com/homepage/white-space.html#gsc.tab=0 

2.overflow:hidden;

overflow속성

요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. 

[ visible | hidden | clip | scroll | auto ]{1,2}

3.text-overflow:ellipsis;

박스안에 내용이 넘칠때 텍스트를 어떻게 해야할지 처리하는 속성.

text-overflow속성은 다음2가지를 모두 충족시켜야 적용된다.
1.overflow값이 hidden,scroll,auto일때(visible제외)
2.white-space:nowrap(텍스트길어도줄바꿈되지않음)또는 텍스트가 다음줄로 이동하지 않는 비슷한경우

text-overflow속성은 block컨테이너를 넘치는 그 줄의 컨텐츠에만 적용가능하기때문이다.(컨텐츠의 아래로 넘치는 텍스트에는 쓸수없다.)

[ clip | ellipsis | <string> ]{1,2}

이 text-overflow속성은 하나 또는 두 개의 값을 사용하여 지정할 수 있습니다. 하나의 값이 제공되면 행 끝 (왼쪽에서 오른쪽으로 텍스트의 오른쪽 끝, 오른쪽에서 왼쪽으로 텍스트의 왼쪽 끝)에 대한 오버 플로우 동작을 지정합니다. 두 개의 값이 제공되면 첫 번째 줄의 왼쪽 끝에 오버플로 동작을 지정하고 두 번째 줄의 오른쪽 끝에 해당 값을 지정합니다.

이제는 약간 감을 잡게된 text-align:center;와 margin:0 auto;의 차이에 대해 정리해보려고 한다. 

1. text-align

블럭요소에 text-align속성을 사용하면 그 안에있는 인라인 요소들이 정렬된다.
1.블럭요소에만 text-align속성을 쓸수있다.
2.블럭요소에 text-align을 쓰면 그 안의 inline요소들이 정렬된다.
3.텍스트뿐아니라 inline요소인 이미지도 가능

속성값: start/end/left/right/center/justify/march-parent
상속여부: 상속된다.

2. margin:0 auto;
블럭요소는 width:100%가 기본속성이다.
width값을 설정하면 width를 뺀 나머지는 margin처리가된다.
margin:0 auto;는 margin을 속기형으로 작성한 것으로, 풀어말하면 위아래 마진은 0, 좌우여백은 자동으로 주라는 의미이다.
따라서 블럭요소에 margin:0 auto;를 쓰면  width값이 있는 블럭요소는 width를 뺀 나머지 여백을 자동으로 나눠서 주기때문에 가운데 정렬이 되는 것이다.

inline 요소에 margin:0 auto;를 주면 인라인요소는 width가 자기크기만큼이고 자동margin이 생성되지 않아서 그 값은 auto로 나누라는 선언은 아무 의미가 없다. 

상속여부:상속안됨


margin:0px auto;라고 쓰다가 깨닳게된것.
margin:0 auto;로 써야하나 margin:0px auto;라고 써야하나 궁금해하다가 웹에서 px단위를 지양해야한다는걸 알게되었다.
px단위를 쓰면 접근성이 떨어진다. 글꼴크기를 16픽셀로 사용하면 브라우저사용자가 기본 글꼴크기를 20px 설정해도 무조건 16px로 보여진다. 사용자가 기본글꼴을 20px로 확장하면 그에따라 모든글꼴이 확장되어야하는데 그렇게 되지않는다.
글꼴크기를 픽셀단위로 설장한다해도 사용자는 브라우저창 크기조절(ctrl+휠, +)를 사용하면 전체요소를 확대할수있지만 브라우저의 기본기능인 기본글꼴크기 조절은 사용할수없게된다.

다음글에서 em/rem에대해 더 알아보려고한다.

CSS를 HTML문서에 적용시키는 방법은 3가지가 있다.

1. 인라인 스타일(Inline styles)

2. 내부스타일시트(Internal Style Sheet)

3. 외부스타일시트(External Style Sheet)

그중 우리가 주로 사용하게되는 

외부스타일시트의 장점 3가지를 정리해보려고 한다.

1. 코드 재활용에 좋다.

2. 일관된 웹페이지를 제작할 수있다.

3. 네트워크사용량을 줄일 수 있다.

1. 코드재활용에 좋다.

인라인스타일이나 내부스타일시트의 경우에는 하나의 html문서안에 삽입되기때문에, 새로운 html문서를 작성하면 또 style을 써줘야한다. 똑같은 내용의 CSS를 페이지마다 반복적으로 작성해줘야한다면 참 귀찮은 일이다.

그런 html문서가 1억개라고 생각하면..? 같은내용을 1억번 써줘야한다.

완전똑같은 내용을 1억번 반복하다니! 너무 비효율적이다.

외부스타일시트를 사용하면 stylesheet를 링크해주는 한줄만으로 1억개 페이지에 완전히 같은 서식을 적용할 수 있게된다! 길고 긴 문서를 페이지마다 넣어줄 필요가 없게 되는 것이다.

또, 페이지마다 CSS가 기술되어있다면 이 코드들이 정확히 일치하는지 하나하나 확인을 해봐야 할텐데 ..

내용이 복잡하고 많아질수록 점점 엄청난 시간을 잡아먹는 작업이 될 것이다. 

하지만 외부스타일시트로 연결했다면? CSS문서 하나를 작성하고 수정하는것만으로 1억개 페이지를 동일하게 수정하는 효과를 가져온다. 

더더욱 좋은건 앞으로는 CSS내용을 하나하나 살피지않고 그냥 그 기능을 원하면 CSS링크를 갖다 쓰는것만으로 공통적인 효과를 가져올 수 있다는것.

이런장점은 2.일관된 웹페이지를 제작할수있다. 와 일맥상통한다.

같은서식을 코드한줄로 동일하게 적용할 수 있으니 일관성있는 웹페이지를 쉽게 제작할 수 있게된다.

3. 네트워크 사용량을 줄일 수 있다.

인라인스타일, 내부스타일의 경우 같은내용의 CSS를 웹페이지 불러올때마다 새롭게 읽어야하니, 새로운 페이지를 열때,그만큼 데이터를 낭비하게 된다. 

HTML문서 내부가 아니라 외부에 CSS를 관리하면,

내용변화없는 CSS는 한번 받아서 캐시(캐시메모리에)저장하고, 웹브라우저가 요청하면 저장된 결과를 가져온다.

캐싱 덕분에 속도가 향상되고 불필요한 데이터 낭비가 없어지게 된다.

결과적으로 사업자는 비용을 줄일 수 있게 되는 것이다.(사용료가 줄어드니까)