박지연의 코딩이야기

* overflow 속성

: 박스 안에서 컨텐츠가 넘칠 때 표현방법을 지정하는 속성 (박스 보다 컨텐츠 크기가 클 때)

• visible : 넘치는 콘텐츠를 그대로 납두면서 박스를 넘겨 표시한다. 기본값
• hidden : 넘치는 콘텐츠를 자르고 보이지 않게 한다.
• scroll : 넘치는 콘텐츠를 자르지만 스크롤바를 표시하여 스크롤을 내리면 볼 수 있게 한다.
• auto : 넘치면 콘텐츠를 자르지만 스크롤바가 표시된다.
• inherit : 부모 요소로부터 값을 상속 받는다.

* overflow-x, overflow-y 속성

overflow만 지정했다면 x축 y축 모두 넘치는 부분을 지정해주는 것이라면
overflow-x , overflow-y 는 각각 x,y축을 지정해서 표현해주는 속성이다.

• visible : 콘텐츠가 잘리지 않지만 보이지 않을 수 있다.
• hidden : 넘치는 콘텐츠를 자르고 보이지 않게 한다.
• scroll : 콘텐츠가 잘리며 항상 스크롤이 지원된다.
• auto : 넘치는 경우 자동으로 스크롤 바를 표시한다.
• no-display : 콘텐츠가 박스 크기에 맞춰지지 않으면 display:none 속성이 적용된 것처럼 박스가 보이지 않게 된다.
• no-content : 콘텐츠가 박스 크기에 맞춰지지 않으면 visibility:hidden 속성이 적용된 것처럼 콘텐츠가 보이지 않게 된다.

* text-overflow 속성

: 박스 안에 text 내용이 넘칠 때 어떻게 처리할지를 지정하는 속성입니다.

* 주의사항

1. overflow 속성값이 hidden, scroll , auto 일 때 적용되는 점 (visible 제외)
2. white-space : nowrap 또는 텍스트가 다음줄로 이동되지않는 경우

* white-space : nowrap(텍스트가 길어도 자동으로 줄바꿈 되지않게하는 것)

* text-overflow 속성값

• clip : 기본값 , 텍스트를 자름
• ellipsis : 잘린 텍스트를 생략부호 (...)로 표시함
• string : 잘린 텍스트를 지정한 문자열로 표시 ( 현재 지원하는 브라우저없음 )

1. 콘텐츠가 넘치는 상황 발생

2. overflow: hidden;

3. white-space: nowrap; (줄바꿈하지않음)

4. text-overflow: ellipsis;

이상 overflow 와 text-overflow  속성에 대해서 알아보았습니다.

* text-align 속성은 텍스트의 정렬 방향을 의미합니다.

• left: 왼쪽 정렬

• right: 오른쪽 정렬

• center: 중앙 정렬

• justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

주의해야할 점 2가지

1. block요소에만 text-align 속성을 적용할 수 있다는 점

2. 정렬되는 것은 block안에 있는 inline요소가 정렬되는 점

* inline : 텍스트 뿐만 아니라 이미지 등의 span , b , a , img 등등 inline요소

*  text-align 속성을 적용할 수 있는 예시

1. div태그(block요소)안에 span문자열이 있는 경우

2. p(block요소) 안에 img를 정렬하려는 경우

3. div태그(block요소) 안에 p태그(block요소) 안에 있는 inline요소 (텍스트 등등)있는 경우

*  text-align 속성을 적용할 수 없는 예시

1. div태그(block요소)안에 div태그(block요소)만 있는경우(텍스트 등 inline요소가 없는경우)

이 경우 inline요소가 없기때문에 빨간 박스가 중앙정렬되지 않는 것을 볼 수 있습니다.

즉 no-text에 display:inline-block을 주면 inline요소가 되므로

빨간 박스가 중앙정렬이 되겠죠?

이렇게 div안에 있는 div(기존block요소)에게 inline-block으로 만들어주니 중앙정렬이 된 것을 볼 수 있습니다.

반대로 다시 inline-block을 지우고 text(inline요소)만 넣어 주겠습니다.

그럼 div안에 있는 div 요소중에서 inline요소만(텍스트'안녕') 중앙정렬이 되는 것을 볼 수 있습니다.

그럼 빨간박스와 안녕 둘다 중앙정렬을 만들기 위해서는 no-text태그에도 inline-block을

넣어주면 정렬되는 것을 볼 수 있습니다.

2. inline요소 span 안에 있는 img (inline요소) 의 경우

block요소가 아닌 span은 text-align가 먹지않습니다.

해결방법 : span을 display:block;으로 바꾸어주면 img는 inline요소이기때문에

중앙정렬이 되는 것을 볼 수 있습니다.

여기까지 text-align속성에 대해서 알아보았습니다 :)

안녕하세요 !

오늘은 display  / visibility / opacity 의 속성에 대해서 정리해보겠습니다 :)

display  / visibility / opacity의 공통적인 부분에서 보이게 하느냐 안보이게 하느냐

즉 ! 가시성을 결정짓는 요소들이랍니다

한번 각각의 속성에 대해서 알아보도록 하겠습니다.

1. display

display는 레이아웃에서 자주 사용되는 요소입니다.

기본적으로 HTML은 block 또는 inline 특성을 갖습니다.

* block 속성정리

• 새로운 라인에서 시작
• 화면 크기 전체의 가로영역을 모두 차지한다. (width: 100%)
• width, height, margin, padding 지정이 가능하다.
• block 요소 안에 inline 요소를 포함할 수 있다.
• width , height 요소를 미지정하면 자동적으로 width:100% height:auto 값으로 나타난다.

* inline 속성정리

• 새로운 라인에서 시작하지 않기때문에 중간에 들어갈 수 있다. 
• 콘텐츠(문자 등등)의 너비가 가로폭을  결정한다.
• width, height, margin-top/bottom를 지정할 수 없다. 이 경우에는 line-height로 지정해준다.
• inline 요소 내에 block요소를 포함할 수 없다.

* inline-block 속성정리

• 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.
• block과 inline요소의 특징을 모두 갖는다.
• block 레벨 요소처럼 width, height, margin, padding 지정 할 수 있다.  line-heigh로도 가능하다.
• inline속성과 같이 콘텐츠의 width가 너비를 결정한다.

2. visibility

visibility 속성은 요소를 보이게 할 건지 안보이게 할 건지를 지정합니다.

3. opacity

opacity는 투명도를 조절하는 것과 같습니다. 

범위는 0.0(투명100%) ~ 1.0(투명 0%) 로 값을 조절합니다.

* 기억해야하는 사항 *

display: none; 

= 요소보이지않음 + 차지하고있던 영역까지 없어짐

visibility : hidden   //  opacity : 0 ; 

= 요소 보이지 않음 + 차지하고 있던 영역은 남아있음

안녕하세요 오늘은 Font Awesome 사용법에 대해서 알아보겠습니다.

⊙ Font Awesome이란?

= 웹 아이콘폰트를 모아놓은 라이브러리

웹 사이트를 만들 때 아이콘을 넣기위해 필수로 사용되는 요소입니다. 

즉 웹사이트에 아이콘을 쉽게 넣어줄 수 있는 것이 바로 Font Awesome 입니다.

[폰트어썸 사이트 이동]

https://fontawesome.com/?from=io

그럼 Font Awesome은 어떻게 사용되는지 알아보겠습니다.

먼저 Font Awesome의 장점에 대해서 알아보겠습니다.

만약 웹 사이트에 인스타 아이콘을 넣고 싶다고 가정할 때

1. Html Font 속성과 똑같이 사용가능하기때문에 색상, 크기를 css를 통해 자유롭게 변경가능하다.

2. 브라우저 호환성 문제가 적다.

3. 무료로 사용이 가능하다.

이제는 사용법에 대해서 알아보겠습니다.

1. CDN 선언하기

폰트어썸을 사용하기위해서는 먼저 CDN선언을 해야합니다.

*CDN이란?

 html 파일에서 참조하고 있는 js 파일이나 다른 리소스 파일에 대해서 각각의 서버에서 문서를 열람할 때마다 참조 파일을 다운로드해야 하는 반복 작업을 줄여주기 위해 공통적으로 참조할 수 있는 공간을 만들어주는데 이 서비스를 제공하는 것을 CDN (Content Delivery Network) 라고 한다.

선언은 먼저 링크를 통해서 stylesheet링크를 넣어줍니다.

      https://cdnjs.com/ 

여기에 들어가서 font-awesome의 링크주소를 복사한뒤에

html href에 복사 붙여넣기를 해줍니다.

2. 아이콘 가져오기

이제 인스타그램 아이콘을 불러올 텐데요 불러오는 방법은 폰트어썸 사이트에서 인스타 무료아이콘을 

가져오면 됩니다. 

사이트에 들어가서 아이콘 -> free에 들어가면 여러가지 아이콘을 볼 수 있습니다.

저는 두번째 아이콘으로 들어가서 태그를 가져오겠습니다.

태그를 누그면 바로 html이 복사가 됩니다. 복사된 태그를 html에 붙여넣으면 

오른쪽에 아이콘이 조그맣게 생긴 것을 볼 수 있습니다. 

3. 색상, 크기 변경하기

이제 불러온 아이콘의 크기와 색상을 바꾸어보겠습니다.

font 속성과 같기때문에 간편하게 크기와 색상을 바꿀 수 있습니다.

폰트로 인식을 하기때문에 크기와 색상을 자유자재로 변경이 가능합니다.

이뿐만아니라 transform을 사용하여 아이콘 애니메이션효과도 가능하니 편리하게

효과를 줄 수 있습니다.

여기까지 폰트어썸에 대해서 알아보았습니다.

안녕하세요 오늘은 margin과 padding속성에 대해서 알아보겠습니다.

먼저 margin과 padding은 공간을 만들어주는 속성에 자주 사용됩니다.

1. margin 

마진 속성은 주변 여백을 뜻 합니다. 마진의 크기를 조절하면서 다른요소와 너무 가깝게

달라붙는 것을 방지해주면서 보기 좋게 만들어주는 기능을 합니다.

마진 속성에는 margin-top , margin-bottom , margin-left , margin-right가 있습니다.

즉 위, 아래, 왼쪽, 오른쪽의 여백을 각각 가리킵니다. 

적용방법은 해당 여백을 주고 싶은 요소에 margin을 주면 되는데요

margin : 해당 값 , auto (그냥 magin으로 주면 위, 아래 , 좌 , 우 모두가 해당 값으로 적용됩니다.)

margin-top : 해당 값 , auto

margin-right : 해당 값 , auto

margin-bottom : 해당 값 , auto

margin-left : 해당 값 , auto

해당값에는 절대값과 상대값이 들어갈 수 있습니다. 

절대값: px

상대값: %

auto: 지정한 값에 맞게 자동으로 크기가 조절되는 것을 말합니다.

2. padding 

 패딩은 콘텐츠 영역과 그 테두리의 사이의 여백을 말합니다.

padding : 해당 값 , auto

 (그냥 magin으로 주면 위, 아래 , 좌 , 우 모두가 해당 값으로 적용됩니다.)

padding-top : 해당 값 , auto

padding-right : 해당 값 , auto

padding-bottom : 해당 값 , auto

padding-left : 해당 값 , auto

즉 magin은 흰 여백이 많이 생기는 것이고 padding은 빨간라인을 기준으로 안에서 밖으로 늘어나는 것을 말합니다.

코드펜을 예시로 들어 보겠습니다.

2개가 서로 붙어있는 직사각형 박스에 마진과 패딩을 주어서 차이를 알아보겠습니다.

먼저 margin:50px;을 주게되면

파란색박스와 빨간색 박스가 각각 위아래좌우의 하얀여백이 50만큼 늘어난 것을 볼 수 있습니다.

이젠 padding:50px를 주겠습니다.

그럼 각각 박스안에서 위아래좌우 50px만큼 콘텐츠가 커진 것을 볼 수 있습니다.

margin과 padding을 각각 한번에 적용 시키는 방법은 

margin: 위 , 우 , 아래 , 좌 순서로 값을 입력해주면 됩니다.

예를들어 magin: 10px 5px 30px 10px; 로 입력하면 

위 : 10px, 오른쪽:5px , 아래:30px , 왼쪽:10px의 값만큼 각각 바뀌게 됩니다.

여기까지 margin과 padding 속성에 대해서 알아보았습니다.

안녕하세요! 오늘은 line-height 속성과 vertical-align 속성의 관계에 대해서 알아보겠습니다.

먼저 line-height 속성과 vertical-align 속성은 함께 자주 쓰이고 있기 때문인데요!

두가지 속성 중에서 line-height 속성에 대해서 먼저 알아보겠습니다.

⊙ line-height

: 말 그대로 라인의 높이를 뜻하는데요 이해하기 쉽게 저희가 전에 블럭요소와 인라인 요소에 

대해서 배웠죠 즉 문자열의 가독성을 좋게 하기 위한 문자의 인라인요소들의 라인박스라고

보시면 됩니다.

기본적으로 문자를 입력하게 되면 가독성을 위해서 자동적으로 행끼리 서로 달라붙지 않고 살짝 띄워있습니다.

* 아래처럼 글자가 붙어 있다면 가독성이 매우 떨어지겠죠?

즉 행간의 높이를 조절할 때 line-height를 사용하게 되죠.

하지만 이 line-height에 절대값 px를 주게 되면 폰트사이즈가 변경되었을 때 line-height의 값은 변하지않게 되므로

텍스트크기는 커졌지만 그것을 감싸고 있는 line-height의 값이 더 작아지는 아이러니한 상황이 발생하게 됩니다.

이것을 조정하기 위해서는 절대값이 아닌 상대값을 주는 것이 더 편리합니다.

line-height를 1로 설정한다는것은 폰트사이즈만큼 높이를 갖겠다는 뜻이 됩니다.

예를들어, font-size가 18xp라면 line-height도 18px만큼 높이가 된다는 것 입니다.

이러면 글자가 어떻게 보일까요?

위에서 보았듯이 글자행끼리의 여백이 사라지기때문에 매우 지저분해보입니다.

따라서 이 상태로 여러 줄로 글을 쓰게 되면 글의 가독성이 매우 떨어질 것 입니다.

그럼 line-height를 1.5로 높여보겠습니다.

그럼 위의 행간이 더 넓어진 것을 볼 수 있습니다. 훨씬 가독성이 높아지게 되어 읽는데 무리가 없게 됩니다.

여기까지 line-height에 대해서 이해가 되었다면 vertical-align에 대해서 알아보겠습니다.

⊙ vertical-align 

vertical-align이란? 

모든 인라인요소의 수직 정렬을 위해 사용됩니다.

하지만 블록요소의 수직 정렬에는 영향을 미치지 않습니다.

ul 에 line-height를 주기위해서 li  요소에 inline-block요소로 만들어줍니다.

li 요소 4개가 나란히 나열되어 있는데 li요소 중에 동그라미 이미지는 위로 올라간 것을 볼 수 있습니다.

수직가운데 정렬이 되는 것을 위해서 vertical-align 을 사용해서 배치해보겠습니다.

제일 먼저 인라인 요소로 만들었다면 ul에 line-height 값을 1로 지정해줍니다.

이제는 모든 준비가 되었기 때문에 vertical-height : middle 적용시켜줍니다.

vertical-align을 인라인요소에 적용시켜주니 수직가운데 정렬이 된 것을 볼 수 있습니다.

정리

1. vertical-align을 적용해주고 싶은 라인박스(ul)를 기준으로 li를 inline-block요소로 만들어주기

2. 라인박스(ul)에 line-height를 적용해줍니다.

3. 인라인요소에 vertical-align을 적용시켜주면 수직가운데 정렬이 된 것을 볼 수 있습니다.

여기까지 line-height 속성과 vertical-align 속성의 관계에 대해서 알아보았습니다.