너굴의 개발주니어에서 시니어되기

항상 아이콘을 사용하기 위해서는 퍼블리셔에게 매번 요청하고 그 답답함을 해소 하기 위해 내가 찾아 보기로 했다.

알고보면 의외로 간단하게 추가하고 CSS에서 사용 할 수 있다.

1.

https://icomoon.io/ 접속  - 상단 IconMoon App 클릭

2. 다음 화면에서 우선 Icon Library 를 클릭 하고 나오는 아이콘 라이브러리에서 추가하고 싶은 아이콘 라이브러리의 'Add' 버튼 클릭 

 - 다만 Purchase 버튼이 나오는 곳은 따로 구매를 해야 된다.

3. add 추가한 뒤 아이콘 라이브러리에서 사용하고자 하는 아이콘을 클릭 하여 선택 한다.

4. 선택 한 뒤 화면 하단에 font 부분을 누르게 되면 내가 선택 한 아이콘들로 구성 된 설정 페이지를 볼수 있다.

해당 화면의 상단 'Perferences'를 클릭 하면 font 의 이름, 클래스 앞 확장자, ie 지원 등 을 설정 할 수 있다.

모든 설정을 다 마친 후에는 font 밑 Download 버튼을 클릭 하여 다운 받는다.

5. 다운 받은 파일을 확인 해보면 

    - demo.html -> 이전 config 화면 

    - style.css -> 아이콘에 대한 정의가 된 css

    - fonts 폴더 -> 아이콘 사용에 필요한 폰트(우리는 아이콘들을 하나의 폰트로 저장을 한 것)

이후 단계에서는 

fonts, css 파일을 가져다가 사용할수도, css 파일 내의 값만 기존에 사용 중인 css 파일에 넣어서 사용 하는 등으로 사용 할 수 있다.

사용 방법을 간단히 demo.html 에서 파악을 하면 

<span class = "i-home">

<a href="#" class = "i-home"> 

등으로 클래스에 css에 설정된 아이콘의 클래스 명을 넣으므로써 사용 할 수가 있다.

현상

 - td 안에 에디터에서 저장한 값을 표현할때 그대로 넣으면 td 값을 넘어서 img 이미지가 넘쳐서 보이게 된다. 

 해결

  - css의 max-width를 이용

.request-service__commentTable td img {
   max-width:100%;
}

위와 코드는 해당 클래스 명 아래 td 안에 있는 img 태그에는 모두 max-width를 적용한다라는 뜻이다.

img에 width, height 가 설정되어있어도 우선순위가 더 높은 max-width를 따라가게 된다. 

< max-width 적용 전 >

< max-width 적용 후 >

이미지가 눌려서 깨지는 현상이 발생하지만 전체 이미지를 다 볼 수 있게 된다.

word-break

word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다.

출처 : http://htglss.tistory.com/31

사진의 예로 

빨간 네모 안에 글이 word-break를 적용하기 전 기존에 설정된 width 값을 넘어서 단어가 표시된다.

아래의 사진은 word-break를 적용한 내용이다. 

또 한가지 컨텐츠 내 엔터, 스페이스바가 있을 경우 자동으로 word-break를 걸어주기도 한다.