컴퓨터 알아가기/HTML CSS
-
CSS Grid Layout : Grid-template-area 속성, Overlapping(중첩) 요소처리컴퓨터 알아가기/HTML CSS 2021. 5. 18. 19:30
이제부터는 CSS Grid Layout에 대해 조금 더 들어가 보겠습니다. ▒ grid-template-area 속성 본 속성을 사용하면 grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-area 속성값으로 사용되는 섹션에 이름을 지정하고 관리할 수 있게 해줍니다. 다음 HTML과 CSS를 기준으로 이야기를 풀어 나가겠습니다. 상기 HTML코드를 보면 이제 홈페이지의 기본구성을 볼 수 있습니다. 및 태그가 위 아래 배치가 되고 웹사이트를 찾아갈 수 있게 만드는 Navigation 섹션인 태그 그리고 본문으로 구성되어 있는 태그로 이루어져 있습니다. CSS코드를 아래와 같이 만들고 웹페이지를 한번 보겠습니다. ① 수직과 수평 Gr..
-
CSS Grid : Repeat함수, Minimax함수, Grid gap, Grid items, Grid area컴퓨터 알아가기/HTML CSS 2021. 5. 17. 19:30
▒ Repeat( ) 함수 Grid의 속성값으로 repeat( ) 함수를 사용할 수 있습니다. 행과 열을 만들때 좀 더 간소화한 코딩을 위한 겁니다. 다음과 같은 예가 있습니다. 위 예는 넓이가 300px을 3개로 나누는데 각각의 크기는 100px이라는 뜻입니다. 즉 다음은 같은 CSS 코드입니다. repeat(3, 100px) = 100px 100px 100px 그럼 repeat(2, 300px 500px)은 어떻게 해석이 될까요? => 300px과 500px을 2번 반복하라의 뜻입니다. 즉, 300px 500px 300px 500px 총 4개의 수직으로 나뉘어지겠죠. 지난 시간 다루었던 다음 그림을 repeat( )함수로 바꾸어 보겠습니다. 위 그림을 보면 수직으로는 반복이 힘들고 수평으로는 같은 F..
-
CSS Grid : Grid-template-columns, Grid-template-rows, Grid-template, Fraction 속성컴퓨터 알아가기/HTML CSS 2021. 5. 14. 19:30
Grid 격자에 대해 공부해 보도록 하겠습니다. 쉽게 표현하자면 하나의 큰 영역(container)안에 바둑판같은 격자(box)를 형성한다고 보면 되겠습니다. 우선 순위는 행 기준인데 행과 열을 지정함으로써 격자가 생기겠지요. 즉 container가 상위 영역이고 box가 하위 영역이어야하고 상위 영역을 Parent, 하위 영역을 Children이라고 영문은 되 있더라구요. Flexbox 처럼 display속성에 grid를 주면 상위 영역안으로 하위 영역이 배치가 되는 구조라고 보시면 됩니다. 다음 HTML과 CSS 그리고 이에 따른 브라우저의 모양을 기준으로 설명 드리겠습니다. (기준은 Codecademy가 메인이고 추가 여러 소스에서 공부하고 같이 내용을 담도록 하겠습니다. ) 위 예제에서 상위 영역..
-
CSS Flexbox : 간단한 홈페이지 레이아웃 꾸며보기컴퓨터 알아가기/HTML CSS 2021. 5. 13. 19:30
이제 HTML도 CSS도 전문가 수준은 아니지만 어느정도 개념을 잡았으니 홈페이지 화면(Main Page)을 한번 꾸며 볼까 합니다. 우선 다음과 같은 순서로 진행해 볼까 합니다. ① 어떤 주제로 할건가 ② Main Page의 태그는 어떤 구성으로 할 건가 ③ 필요 이미지가 있는가 ▒ Main Page 만들기 저는 과일가게에서 판매되는 과일을 홍보해 보고자 합니다. 과일에 대한 이미지도 필요할 거고 이름 가격 등등이 필요할 건데 이번 시간에는 레이아웃에 중점을 두기 위하여 Main Page의 큰 틀만 만들어 보는 것으로 목표를 두겠습니다. 구성은 다음과 같이 해 보겠습니다. 다른 HTML을 사용한 적이 없기때문에 태그안에 4개의 Division으로 나눴습니다. 다음과 같이 HTML로 구성해 보았습니다. ..
-
CSS Flexbox : Flex-direction, Flex-flow, Nested Flexbox컴퓨터 알아가기/HTML CSS 2021. 4. 22. 19:30
Flexbox 의 축에 대해 다음과 같이 정리할 수 있습니다. 기본적으로 Main 축은 수평을 기준으로 생각하면 되고, 보조축(교차축)은 수직으로 생각하면 됩니다. Main 축은 Justify-content, Flex-wrap, Flex-grow, Flex-shrink로 생각하면 되고 교차축은 Align-items, Align-content로 보면 됩니다. Main축과 교차축은 서로 교환될 수 있습니다. 이럴경우 사용하는 속성이 Flex-direction 입니다. ※ 누누히 언급하지만 영어의 첫글자를 보기 좋게 하기 위해 대문자로 사용하는 겁니다. 코딩하는 경우는 전부 소문자로 사용하시면 됩니다. ▒ Flex-direction 속성 기본적으로 4가지 속성값을 알 필요가 있습니다. 다음 브라우저 기준으로 ..
-
CSS Flexbox : Flex 속성축약, Flex-wrap, Align-content컴퓨터 알아가기/HTML CSS 2021. 4. 21. 19:30
지난시간까지 Flex-grow, Flex-shrink, Flex-basis의 3가지 속성에 대해 연습해 보았습니다. 이 3가지를 다음과 같이 CSS에서 나타낸다고 가정해 보겠습니다. 이럴 경우 순서대로 다음과 같이 나타낼 수 있습니다. 이는 속성값만 표시하면 grow, shrink, basis 순으로 CSS는 인식한다는 이야기입니다. 그렇다면 다음은 무엇을 뜻할까요? 정답은 Flex-grow값과 Flex-shrink값입니다. 그렇다면 다음은요? 정답은 Flex-grow와 Flex-basis 값입니다. 그런데 기억해야 될 사항은 Flex-shrink와 Flex-basis에 대한 속성 축약은 없습니다. ▒ Flex-wrap 상위 Class(Container)의 영역이 하위 Class(contents)영역보다..
-
CSS Flexbox : Flex-grow, Flex-basis컴퓨터 알아가기/HTML CSS 2021. 4. 20. 19:30
지난시간까지 Flexbox의 성질에 대해 알아 보았습니다. 저처럼 기본에 대한 내용만 확인하고자 하면 지난시간까지 한 Justify-content는 가로로 위치를 배치하는 것이고 Align-items는 세로로 위치를 배치하는 개념이다라고 생각하면 될 것 같습니다. 이제부터는 하위 Class에 Flex 속성을 주어 자체가 어떻게 변할 수 있는지 좀 더 알아보도록 하겠습니다. ▒ Flex-grow Flex-grow 속성은 하위항목에 적용하여 상위 Class(container)영역안에서 flexible하게 위치를 자동으로 조정하도록 합니다. 글 보다는 다음 예제를 통해서 이해를 하도록 하겠습니다. 우선 HTML 에 3개의 박스 영역을 만듭니다. CSS를 다음과 같이 해봅니다. 이제 영역의 색상을 달리하여 이해..
-
CSS Flexbox : Align-items 속성값 (Flex-start, Flex-end, Center, Baseline, Stretch)컴퓨터 알아가기/HTML CSS 2021. 4. 15. 19:30
지난시간까지는 Flexbox의 기본성질인 Justify-content에 대해 알아 보았습니다. 상위 Class 영역내에서 왼쪽 상단 모서리부터 시작이 되는 기본성질이었습니다. 아울러, 상위 Class영역안에서만 하위 Class 항목이 유연하게(flexible) 조절된다는 것도 이해 하였습니다. 이제는 수직적으로 배치하는 성질에 대해 알아볼 시간입니다. 역시 본 강의 또한 Codecademy에서 무료로 배우고 있습니다. 물론 영어로 되어 있지만 초보들에겐 좋은 강의인것 같습니다. 이외 여러가지 사이트에서 무료로 강좌를 열고 있네요. 참 고마운 분들입니다. (특히 baseline을 이해하는데는 다른 여러강좌를 참조했네요) ▒ Align-items 속성 Align-items의 속성값에 대하여 지난 시간 박스예..