본문 바로가기
반응형

분류 전체보기256

CSS속성_clear floating 요소는 주변 요소들의 배치에도 영향을 줍니다. 그러므로 가끔 주변 요소들이 의도하지 않은 대로 나타날 수 있는데, clear 속성을 사용하여 이 문제를 해결할 수 있습니다. 의도한 게 아니라면 대부분 floating 요소 다음 요소에 바로 clear를 해주는 게 좋습니다. clear는 float과 항상 따라다니는 속성이므로 같이 잘 알아두어야 합니다. clear 속성 요소를 floating 된 요소의 영향에서 벗어나게 하는 속성이며, 블록레벨요소에만 적용 가능합니다. 속성값(기본값:none) 1. none : 양쪽으로 floating 요소를 허용. 2. left : 왼쪽으로 floating 요소를 허용. 3. right : 오른쪽으로 floating 요소를 허용. 4. both : 양쪽으.. 2020. 3. 27.
CSS속성_float 모든 요소는 기본적으로 보통의 흐름에 따라 위에서 아래로, 그리고 좌측에서 우측으로 배치됩니다. 요소 박스의 경계대로 차례대로 배치되며, float 속성은 요소를 보통의 흐름에서 벗어나 독자적인 공간 위에 배치되게 합니다. 주로 레이아웃을 만들면서 영역을 좌우로 분할하여 만들 때 사용하는 용도로 선언합니다. float을 이용하면 주변 요소들과 더욱 자연스럽게 배치될 수 있지만, floating 되지 않은 주변 요소들에도 영향을 주기 때문에 잘 이해하고 사용해야 합니다. float 속성 요소를 float(요소를 보통의 흐름에서 벗어나게함) 시킬지 지정하는 속성입니다. float : 가라앉지않고 물에 뜨다. 떠가다. 속성값 (기본값 :none) 1. none : float 시키지 않음 2. left : 좌측.. 2020. 3. 27.
CSS속성_visibility CSS에서 요소를 숨기는 방법에는 몇 가지가 있습니다. display 속성 값을 none으로 할 수도 있고, 다른 위치 관련 속성들을 이용해서 안 보이게 숨기는 방법도 있습니다. 하지만 요소를 숨긴다는 의미로만 해석하면 가장 명시적인 방법은 visibility 속성을 이용하는 것입니다. visibility 속성 요소의 화면 표시 여부를 지정하는 속성입니다. 속성값(기본값:visible) 1. visible : 화면에 표시 2. hidden : 화면에 표시되지 않고 공간은 차지함. 3. collapse : 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능) display:none과의 차이점 display:none 요소가 렌더링 되지 않음.(DOM에 존재하지않음) visibility:hidden.. 2020. 3. 27.
CSS속성_display(디스플레이) 모든 요소는 자기가 기본적으로 가지고 있는 display 값이 있습니다. 그리고 그 값에 따라 블록 레벨, 인라인 레벨 등 렌더링 박스의 유형이 결정됩니다. display 속성으로 해당 요소의 렌더링 박스의 유형을 변경할 수 있으며 심지어 렌더링 여부도 결정할 수 있습니다. display 속성을 잘 알아야 요소가 화면에 표현되는 방식을 이해하기 쉽습니다. 블록레벨태그 Block Level 부모 요소의 가로 영역에 꽉채워져 표현되는 태그를 의미합니다. (한 줄에 하나의 요소 표시) 양옆으로 다른 요소가 배치되지못하도록 박스를 생성하므로 박스의 위 아래로 줄바꿈이 생기게 됩니다. 블록레벨 요소는 일반적인 모든 요소를 포함할 수 있습니다. ex: div, h1~h6, p, ul, li, table ... 인라.. 2020. 3. 27.
CSS속성_단어 관련 속성 CSS에는 앞에서 배운 font와 관련된 텍스트에 대한 속성뿐만아니라, 단어에 대해서 어떻게 표현되게 할지 지정할 수 있습니다. 간단하게 보고가자면, 단어의 공백을 어떻게 처리할지, 단어 사이의 간격을 얼마만큼 가질지, 줄 바꿈이 되는 지점은 어디로 둘지 등을 제어할 수 있습니다. white-space 속성 요소 안에 공백을 어떻게 처리할지 지정하는 속성입니다. 속성값(기본값:normal) 1. normal : 공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 2. nowrap : 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음. 3. pre : 공백과 개행을 표현하고 자동 줄바꿈이 일어나지 않음. 4. pre-line : 공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생. .. 2020. 3. 27.
CSS속성_text-decoration(텍스트 데코레이션) text-decoration 속성 텍스트의 장식을 지정하는 속성입니다. ( text-decoration-line / text-decoration-color / text-decoration-style ) 기본 값 : none currentColor solid text-decoration-line (텍스트 데코레이션 라인) none : 텍스트 꾸밈을 생성하지 않음 underline : 밑줄로 꾸밈 설정 overline : 윗줄로 꾸밈 설정 line-through : 중간을 지나는 줄로 꾸밈 설정(취소선) text-decoration-color (텍스트 데코레이션 컬러) 색상값을 사용하여 원하는 색상을 지정할 수 있습니다. currentColor는 CSS 내에서 색상 값으로 사용할 수 있는 키워드입니다. te.. 2020. 3. 27.
CSS속성_text-indent 문서나 코드를 살펴보면 새로운 문단의 시작에서 들여쓰기를 많이 사용합니다. 들여쓰기는 문단의 처음 왼쪽 글머리에 빈칸을 만들어 가독성을 향상하는 효과가 있습니다. text-indent를 이용해서 문장의 첫 줄을 들여쓰기할 수 있습니다. text-indent 속성 속성값 (기본값:0) length: px, em 등 고정 수치로 지정하며 음수 사용이 가능합니다. 음수 값 사용 시 왼쪽으로 이동합니다. % : 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다. 2020. 3. 27.
CSS속성_text-align(텍스트 정렬) text-align 속성 텍스트의 정렬을 지정하는 속성입니다. text-align은 인라인 요소의 수평 정렬에 사용됩니다. 이 속성 또한 div와 같은 블록 레벨 요소에는 적용되지 않습니다. 기본 값은 left이지만 경우에 따라 다릅니다. 문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고, RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됩니다. 속성값 1. left : 텍스트를 왼쪽에 정렬 2. right : 텍스트를 오른쪽에 정렬 3. center : 텍스트를 중앙으로 정렬 4. justify : 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬하지않음) text-align과 display의 .. 2020. 3. 27.
CSS속성_vertical-align(버티컬얼라인) css를 통해서 텍스트를 수직, 수평 정렬 할 수 있습니다. 그 중 vertical-align 속성을 이용하여 수직 정렬을 할 수 있습니다. 이때 주의하실 점은 block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있습니다. 따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용되지 않습니다. vertical-align 속성 요소의 수직 정렬을 지정하는 속성입니다. (인라인레벨요소에 적용 가능) 속성값(기본값:baseline) 1. length : 요소의 길이만큼 올리거나 내리며 음수 값도 사용 가능합니다. (px값 사용 시 baseline을 기준으로 이동) 2. % : 요소를 line-height 기준으로 이동하며 음수 값 사용 가능합니다. 3... 2020. 3. 27.
CSS속성_webfont(웹폰트):@font-face 실무에서 폰트 관련해서 주로 사용되는 명칭으로 ' 시스템 폰트 ', ' 이미지 폰트 ', ' 웹 폰트 '가 있습니다. 시스템 폰트는 font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우를 말하고, 이미지 폰트는 특정 글꼴을 사용하는 것이 아니고, 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우를 의미합니다. 정확히 얘기하면 이미지 폰트는 폰트가 아니고 이미지 입니다. 웹 폰트는 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 말합니다. @font-face 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성입니다. 속성값(기본값:없음) 1. font-family : 글꼴의.. 2020. 3. 27.
반응형

티스토리툴바