컴퓨터 알아가기/HTML CSS
-
CSS Flexbox : Justify-Content 속성값(Flex-start, Flex-end, Center, Space-around, Space-between)컴퓨터 알아가기/HTML CSS 2021. 4. 13. 19:30
지난 시간 Flexbox 관련 display 속성값으로 flex와 inline-flex 에 대해 살펴 보았습니다. 개념을 다시 정리하자면 상위 Class (부모)에 적용된 flex는 하위 Class(자식)에도 영향을 끼치는데 상위 Class 범위안에서 영향을 끼친다라고 정의할 수 있습니다. 만일 이 말이 무슨말인지 이해가 안가면 다시한번 지난 시간 내용을 꼭 보시기 바랍니다. 어찌되었던 flex 속성값을 주게되면 기준점은 왼쪽 상단 모서리로 부터 시작이 됩니다. 이제 오늘부터 중심축(Main Axis)을 중심으로 박스영역을 이동시키는 속성인 Justify-Content에 대해 공부해 볼 겁니다. ▒ Justify-Content ① justify-content: flex-start Justify-Conte..
-
CSS Flexbox : Display 속성 (Flex, Inline-flex)컴퓨터 알아가기/HTML CSS 2021. 4. 12. 19:30
이번 시간부터는 최신트렌드인 Flexbox Layout에 대해 공부하고자 합니다. 그동안 Box와 Display 개념을 배우고 이미 알고 있기때문에 최근에 CSS3용으로 개발된 레이아웃 배치하는 Flexbox에 대해 공부를 한다면 CSS의 기본은 어느정도 알고 간단고 보면 됩니다. Flexbox 레이아웃에는 Flex Containers 와 Flex Items 두가지 중요요소가 있습니다. Flex Containers의 모든 하위 항목은 Flex Items 입니다. 지금부터 각 속성에 대해 하나씩 보도록 할게요. 그리고나서 간단한 홈페이지를 만들면서 연습해보고자 합니다. 이는 저에게도 도전이 될 것 같습니다. ▒ display: flex Flex Container는 화면 크기 변화에 대응하는 웹사이트를 만드..
-
CSS Typography(글씨) II : Line Height, Serif & Sans Serif, Fallback Fonts, 비사용자 폰트연결, @font-face속성컴퓨터 알아가기/HTML CSS 2021. 4. 8. 19:30
오늘은 웹페이지에서 글씨가 차지하는 공간을 분석하고 비사용자 폰트에 대해서 외부와의 링크를 통하는 방법을 연습해 보겠습니다. 다음 그림을 보면 이해가 쉬울 듯 합니다. 3가지 측면에서 보면 전체 글씨가 차지하고 있는 높이를 Line Height라고 하고 Line Height에서 Font의 크기를 뺀 공간을 Leading이라고 합니다. ▒ Line Height 위 그림 예를 들면 font-size가 커지면 leading 간격이 줄어들게 되어 읽기 어려운 상황이 생깁니다. 이럴 경우 Line Height 속성값을 사용하면 문제를 해결할 수 있습니다. 다음 2가지 속성값을 사용할 수 있습니다. ① 절대값 지정 절대값은 단위가 필요없이 1.5 같은 숫자를 사용합니다. 이는 폰트크기가 커지면 절대값만큼 같이 반영..
-
CSS Typography(글씨) : Font Family, Font Weight, Font Style, Word Spacing, Letter Spacing, Text Transformation, Text Alignment컴퓨터 알아가기/HTML CSS 2021. 4. 6. 19:30
지금부터는 글꼴을 스타일링하여 읽기 쉽고 매력적으로 만드는 과정을 해보고자 합니다. 결국 정보를 제공하는 측면에서는 글꼴의 스타일링이 중요한 작업중 하나인 것은 확실한 것 같습니다. ▒ Font Family 글꼴 유형을 변경할 때 사용하는 속성이름입니다. 속성이름은 font-family로 사용합니다. 지난 HTML 시간에도 한번 언급했는데 다음 고려할 사항을 다시 한번 보시죠. 1. 나만의 글씨체를 사용할 경우 다른 웹페이지 사용자의 컴퓨터에 같은 글꼴이 설치가 되어 있지 않을 수 있다. 2. 웹페이지의 로딩 시간 등을 고려할 때 글꼴은 2~3개 정도로 사용하는 것이 좋다. 3. 기본 글꼴은 Times New Roman 체이다. 4. 글씨체 이름이 두개 단어 이상으로 되어 있는 경우는 큰따옴표 " "로 ..
-
CSS 기본 : Color (Color, Background-Color, Hex, RGB, HSL, Opacity and Alpha)컴퓨터 알아가기/HTML CSS 2021. 4. 5. 19:30
이제는 CSS의 스타일링에서 중요한 색(Color)에 대해 알아볼 시간입니다. 색에 대하여 구체적으로 알아보기전에 기본적으로 스타일 방식을 고려할 다음 2가지가 있습니다. 1. Foreground Color Foreground Color는 요소에 영향을 미치는 색입니다. 예를 들어 타이틀 글자의 색을 파란색으로 만드는 것을 말합니다. 속성의 이름은 color로 나타냅니다. 2. Backgroud Color Background Color는 말그대로 배경색을 지정해 줄 수 있는데 속성의 이름은 그대로 background-color로 나타냅니다. 다음 CSS 예에서 태그의 글씨는 빨간색이고 태그의 기본영역이 되어 있는 배경색은 파란색입니다. ▒ Hexadecimal Color 방식 (16진번 색 방식) 색을 ..
-
CSS 기본 Position : Float 속성, Clear 속성컴퓨터 알아가기/HTML CSS 2021. 4. 1. 19:30
CSS Position을 공부하면서 정확한 위치지정에 대해 이야기 했었습니다. 이제는 정확한 위치지정보다 가능한 왼쪽이나 오른쪽으로 화면에 떠있는 위치를 지정할때 사용하는 속성을 보도록 하겠으며 위치가 서로 간섭을 일으킬 때 사용하는 속성도 같이 보도록 하겠습니다. ▒ Float 속성 Float속성에 사용하는 속성값은 다음 2가지를 예로 들 수 있습니다. ▶ left : 지정된 요소를 가능한 왼쪽으로 이동시킵니다. ▶ right : 지정된 요소를 가능한 오른쪽으로 이동시킵니다. 위 속성값은 Position 속성값이 static(기본값)이거나 relative 값일때 동작합니다. 다음 브라우저에 두개의 블록이 지정되어 있습니다. 모두 relative 값으로 속성값을 주었구요. 밑에 파란색 블록을 오른쪽으로 ..
-
CSS 기본 Position : Z-index, Display요소(Inline, Block, Inline-block)컴퓨터 알아가기/HTML CSS 2021. 3. 30. 19:30
▒ Z-Index 지난시간까지 CSS에서 블록이 형성된 박스형의 위치에 대해 알아 보았습니다. 그런데 웹페이지상 블록이 형성된 영역(Box나 Contents 등)이 불가피하게 서로 겹쳐지게 되어 내용을 보기에 어려움을 겪을때가 있습니다. 이럴 경우 Z-index 속성을 사용하여 영역의 위치를 조절할 수 있습니다. 엑셀을 사용하시는 분들은 그림이 겹칠경우 맨위로 보내기, 맨 아래로 보내기 등의 기능을 아실겁니다. 그런 속성을 Z-index가 담당합니다. 예를 들어 지난시간에 아래 그림과 같은 블록을 공부해 봤습니다. 그런데 만일 하늘색 영역이 중요한 타이틀을 나타내고 파란색 영역에 방해를 받지 않기 위해서 맨 위로 보내고 싶은 경우 다음과 같이 CSS에 Z-index값을 줄 수 있습니다. 상기 예에서 보면..
-
CSS 기본 Position, Position : Relative, Position : Absolute, Position : Fixed컴퓨터 알아가기/HTML CSS 2021. 3. 29. 19:30
지난 시간까지 CSS의 중요한 요소인 BOX 모델에 대해 개념을 잡아 보았습니다. 이제부터는 본격적으로 CSS의 근본적인 스타일링 중에서 위치를 잡아가는 내용에 대해 알아보도록 하겠습니다. ▒ Position (위치) 개요 다음 HTML과 CSS내용을 참조해 보시고 브라우저에 어떤 형태로 나오는지 상상해 보세요. 위 이미지를 보면 두개의 태그가 나타내는 공간은 서로 겹쳐지지 않습니다. 그리고 왼쪽으로 일관되게 배치가 됩니다. 지금은 위치에 대한 속성이 기본값으로 설정되어 있고 이는 왼쪽 위부터 자리를 차지하게 됩니다. 위치에 대한 속성은 position으로 나타내고 속성값은 다음 4가지로 요약할 수 있습니다. ▶ static (기본 설정값입니다. 지정할 필요가 없습니다.), relative, absolu..