웹(web)/프론트엔드-css27 CSS position position은 요소의 위치를 조정하기 위해서 사용된다. 원래 배치되기로 한 곳에서 조금 조정하거나 특정한 방식으로 찾은 부모 요소를 기준으로 배치를 하거나 하는 것이다. position 사용시 z-index이라는 z축에 우선순위를 주는 속성이 있다. 한글 프로그램에서 그림이 여러 개 겹쳐있을 때 '맨 앞으로' 같은 것을 생각하면 쉽다. position을 사용하면 같은 영역안에서 다른 박스와 겹치는 부분이 생길 수 있으므로 주의해야한다. 즉, 여러 겹의 레이어가 쌓이는 상황이 발생한다. 각 속성값을 보면서 활용방법을 생각해보면 유용할 것이다. static default 값이다. 즉, 모든 요소는 static이 기본 값으로서 inline, block 박스들이 나열되는 방법들을 잘 알고 있으면 된다. in.. 2020. 5. 9. CSS text-overflow(텍스트 잘리는 부분 처리) 아래 사진처럼 공간이 부족한 경우 ... 으로 처리하는 예시이다. 단독으로 text-overflow을 사용하면 "..." 처리가 되지 않는다. 아래 두 가지 속성을 함께 사용해야 한다. overflow: hidden white-space: nowrap 또한 당연한 얘기지만 글자가 width의 좌우 넓이를 넘쳐야 한다. 2020. 5. 8. CSS Text 관련 속성 mozilla에 css fonts, css text라고 검색하면 관련 속성이 30개가 넘게 나온다. 외울 수 없으니 자주 사용하는 것만 간단히 파악하고 다른 것들은 필요할 때 찾아서 쓰도록 하자. 한글이나 워드 프로그램에서 글자를 꾸며 보았을 것이다. 대표적으로 글자 크기 변경, 정렬, 글자 색 변경 이 있다. 이런 기능들을 css를 활용하여 적용하는 작업인 셈이다. 아래 설명할 것들은 글자가 들어가는 태그라면 가능하다. , 과 같은 것들에서 글자를 사용하기 때문이다. font 관련 속성 (글자 레벨에서의 속성) font-size : 글자의 크기를 조정 font-weight: 글자 굵기 조정 font-style: font 스타일로 normal | italic | oblique 등이 있음 color: 글자.. 2020. 5. 6. CSS Box align, content align 레이아웃을 구성하면서 정렬의 사용 빈도가 높다. 정렬의 종류는 두 가지이다. 하나는 박스를 정렬하는 방법이고 다른 하나는 박스 안의 컨텐츠를 정렬하는 방법이다. 박스를 화면 상에서 가운데 정렬하는 방법은 display 속성에 따라 다르다. block : width를 지정 후 margin: auto; inline: 부모 태그에 text-align: center; inline-block : inline과 동일 박스 내부의 컨텐츠를 정렬하는 방법은 display 속성에 따라 다르다. block: text-align: center; inline: 박스 자체를 정렬하는 방법을 이용 inline-block: text-align: center; 정리하면 1.박스 자체 정렬 1.1. block인 경우 width 지정 .. 2020. 5. 6. 이전 1 2 3 4 5 6 7 다음
