악덕고용주의 개발 일기

[    CSS로 일정 길이 이상일 때 텍스트 줄임말 ...로 표시하기    ]

1. 가끔 일정 길이를 넘어가면 문자열이 ...으로 생략되듯이 표시되게 하고 싶거나

2. 혹은, textarea 내에서 문자열을 길게 입력하면 지정한 길이 이상일 때 자동으로 개행(줄바꿈) 되도록 처리하고 싶을 때가 있다.

먼저, 1번 일정 길이를 넘어가면 문자열이 ... 으로 생략되듯이 표시하게 하려면 다음의 조건이 필요하다.

1) width가 고정적일 것( 최대 표시될 너비를 꼭 지정되어야 한다.)

2) overflow: hidden; 을 사용해 영역을 감출 것

3) 아래줄로 내려가는 것을 막기위해 white-space: nowrap 등이 필요

4) 마지막으로, 반드시 block요소여야 한다. inline요소에는 적용이 안됨... 따라서 인라인 태그 요소일 경우 => display:block으로 지정해 주어야 함!

5) ...으로 표시하기 위해서 text-overflow:ellipsis 로 지정해야한다.

이를 적용하면

<style type="text/css">
  body p {

  display:block;
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap; 
  width: 100px;
  }
</style>

처럼 지정하면 된다.

-------------------------------------------------------------------------------------------

다음으로...

일정 길이 이상이면 자동으로 개행이 되도록 textarea에서 설정할 경우는 다음과 같이

white-space:normal; 를 써주면 된다. 역시 width가 지정되어야 한다.

[    float 속성    ]

float 속성은 본래 이미지 태그와 글단락이 같이 있을 때 한 줄에 같이 나오기 위해 주로 사용되었는데

그뿐만 아니라 레이아웃을 잡을때도 많이 이용되게 되었다. 하지만 최근에는 flex가 도입되면서 점차 float를 이용한

레이아웃을 잡는 방식은 줄어들고 있는 추세이다.

float:left

float:right

처럼 사용해서 태그가 배치될 위치를 지정하게 된다.

아래의 예제에서는 본래 이미지 태그와 p태그는 block 속성에 의해 이미지 태그가 오고 그 아래에 문단 태그가 와야 정상이지만

이미지에 float:right를 줌으로서 img는 오른쪽으로 배치가 되고 문단이 왼쪽으로 배치되었다.

하지만 그 이후에 또 나오는 p태그(id="clearAdjustP")의 경우는 이러한 float의 영향을 배제시키고 싶기 때문에

float를 해제하는 clear 속성을 이용해서 clear:both해주면 float:left든 float:right든 다 해제한다는 의미가 되기 때문에

정상적으로 이미지 태그 아래에 출력되게 되는 것을 알 수 있다.

[    반응형 웹을 만드는 Media Query    ]

화면 크기에 따라 반응하는 웹을 만드는데 필요한 media query에 대해 학습합니다.

@media (){

} 라는 구조를 가지고 있는대요

- @media(width:500px){

width가 500px일 때 지정할 속성을 지정하게 됨.

}

- @media(max-width:500px){

최대 500px까지 즉 0~500px까지를 의미

}

- @media(min-width:500px){

최소 500px 즉 500px 이상을 의미한다.

}

만약 500 ~ 600을 지정하고 싶다면?

cascading을 주의해야한다. 나중에 쓴 것이 우선순위가 더 높다는 것에 유의!

@media(max-width:600px){

background-color:red;

}

@media(max-width:500px){

background-color:blue;

}

이렇게하면 500 ~ 600 px까지는 red가 적용되고 500이하가 되면 blue가 적용된다.

만약 두개의 순서를 바꿔서 쓰면? 600px이하면 0픽셀이 될때까지 red가 나오게 된다. cascading에 의한 우선순위때문에

이점을 유의해서 작성하자.

또한, 모바일 기기에서도 반응형이 잘 적용될 수 있도록 다음의 meta 태그를 넣도록 하자.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Flex로 만든 layout에 Media Query를 적용해 보기

아래는 모바일 화면(500px 보다 작아졌을 때) section 영역이 수직으로 main nav aside 순으로 보이고

기존에 nav와 aside가 가지고 있었던 border를 없애는걸 적용한 것이다.

따라서, section의 flex-direction:column으로 바꾸고 nav와 aside의 border를 border:none으로 한 다음에

flex의 order 속성을 이용해서 순서를 지정해주면 된다.

[    Flex    ]

기존의 table이나 div를 쓰고 position Float를 사용하던 방식에서 벗어나 Flex를 이용한 레이아웃을 구성하는 방법에 대해서알아봅시다.

1. flex 기본(display:flex, flex-direction, flex-basis) & flex-grow, flex-shrink 속성

2. 위에서 공부한 속성을 활용해서 대표적인 레이아웃 디자인인 Holy Grail Layout을 구성해보도록 하자.

이러한 구조를 만들어 볼 건데

먼저, (Header), (Nav, Main, AD), (Footer)로 구성되어 있다.

크게 태그로

1) header, section, footer 시멘틱 태그로 구성하고 section에는 nav, main, aside(광고부분) 시멘틱 태그를 배치한다.

<div class="container">

<header>헤더</header>

<section>

<nav></nav>

<main></main>

<aside></asdie>

</section>

<footer>푸터</footer>

</div>

2) 먼저 Flex를 사용하기 위해 가장 부모인 container에 플렉스를 사용하겠다고 display:flex를 지정한다.

그리고, 그 자식들은 수직으로 배치되어야 함으로 flex-direction:column을 지정해 준다.

3) 헌데 section 태그 내의 자식들(nav,main,aside)는 가로로 배치되어야한다.

따라서, 그들의 부모인 section에 flex를 사용하기 위해 display:flex를 지정하고, flex-direction:row를 지정한다.

4) 마지막으로, 화면을 줄여도 nav부분과 aside부분은 줄어들지 않기 위해서 flex-shrink를 지정할 건데

지정하지 않을 경우 flex-shrink:1 로 되어있다. 따라서 나머지 부분은 그대로 두고 

nav와 aside만 flex-shrink:0 을 지정해 창을 줄여도 그 크기는 줄어들지 않도록 설정하도록 한다.

또한 nav와 aside는 일정 크기를 가지도록 flex-basis:150px; 정도를 할당하도록 하자.

5) 기타사항

만약, section 태그 내에서 지금은 nav, main, aside 순으로 되어 있는데 이 순서를 main nav aside로 바꾸고 싶은 경우는 어떻게 할까

태그의 위치를 바꿀 수도 있지만 order라는 속성을 사용하면 된다.

main{

order:0;

}

nav{

order:1;

}

aside{

order:2;

}

로 지정하면 된다.

Ex)

[    position offset    ]

[엘리먼트의 위치를 정하는 속성 position 속성값 4가지]

1. static(기본값) : 움직이지 않고 정적인 상태 => position:static

2. relative : 부모 엘리먼트를 기준으로 상대적으로 움직인다 => position:relative

3. absolute : position값이 relative인 부모를 기준으로(없다면 웹페이지의 가장 가장자리 기준) 움직인다. => position:absolute
* 자식의 위치값이 absolute이면 부모와의 관계가 끊기고 그래서 자신의 크기가 딱 컨텐츠만 해진다.
그리고 값을 아예 없애면 원래 위치로 돌아간다.

4. fixed : 스크롤을 움직여도 지정된 위치에 고정된다. => position:fixed
* absolute와 마찬가지로 부모와의 관계가 끊기고 크기는 자신의 컨텐츠만 해진다.

offset

-    top 

-    right

-    bottom

-    left

~만큼씩 위치를 떨어져 위치될지 결정할 수 있는데 position 속성과 같이 사용된다.

아무것도 지정하지 않을 경우 position:static이 지정되어 있는데 이때는 이 offset 속성들은 영향을 주지 못한다.

따라서, position:relative 나 position:absolute를 사용해서 해야하는데

position:relative의 경우 부모와의 상대위치를 기준으로하는 것이다. 즉 자식이 position:relative라면 자신의 부모를 기준으로해서

left:10px; top:20px; 이면 부모를 기준으로해 위는 20px 떨어진 위치 왼쪽으로부터 10px 떨어진 위치에 위치하게 된다.

position:absolute의 경우 절대위치를 가리키는데 이떄는 position:static인 부모들은 무시하고 그 외의 position:relative나 position:absolute가 지정된 부모를 기준으로해서 배치되게 된다.

즉, 자신의 부모가 기준이 아니다!

또한 이러한 position:absolute는 z-index, fixed와 함께 사용되 메뉴를 구성하는데 사용될 수 있다.

position : fixed => 스크롤과 관계없이 고정된 위치에 배치되도록할 수 있다.(상단 메뉴등에 활용할 수 있음)

[    폰트 관련 속성 및 외부 폰트 설정하기    ]

1. 폰트 사이즈 속성 => font-size:5rem;

2. 텍스트 정렬 속성 =>text-align:justify;

left, right, justify 등을 지정할 수 있다. justify는 양옆을 딱딱 맞추는 정렬 방법으로 글자 사이 간격을 조정해 맞추게 된다.

3. 글씨체 속성 =>  font-family:"Times New Roman" Times, serif;

이렇게 3개를 써놓으면, 첫번째 걸 지정하되 해당 글씨체가 없으면 2번째 것 그것도 없으면 3번째 것을 지정하게 된다.     

 4. 폰트 bold 속성 => font-weight: bold;

 5. 줄 간격 속성 => line-height: 1.8; 

// 1.8 배로 지정

[    외부 폰트 임포트하고 사용하는 방법    ]

@font-face{

font-family:"GoodFont"; /*폰트 패밀리 이름 추가*/

src:url("resources/fonts/NANUMGOTHICCODING.TTF"); /*폰트 파일 주소*/

}

적용

body{

font-familly:"GoodFont" !important;

}