분류 전체보기
-
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를 다음과 같이 해봅니다. 이제 영역의 색상을 달리하여 이해..
-
호떡집에 불났다의 유래몰상식 (몰라도 되는 상식) 2021. 4. 16. 19:30
갑자기 오늘 아침 방송에 리포터가 '호떡집에 불난것 처럼 소란스럽다'라는 말을 하기에 늘 사용하던 언어고 이해가 잘 가는 내용인데 문득 왜 시끄럽고 소란스러운 것을 '호떡집에 불났다'라는 표현을 쓰는지 궁금해 지더군요. 한번 그 유래를 찾아봐야겠어요. 1. 호떡의 유래 호떡은 가장 일반적인게 밀가루나 참쌀로 반죽한 것에 설탕, 땅콩 등 견과류를 넣어 기름에 구워낸 떡인데 참 맛있죠. 특히 예전에는 호떡을 감싼 신문지 종이에 흑설탕이 흘러나와 손이 뜨거우면서도 참 좋아라 한 기억이 있네요. 이 호떡이 중국에서 유래됐다고 하는군요. 참 아픈 기억인데 우리나라의 일을 외세(중국)의 힘을 빌린 사건에서부터 출발한다고 전해집니다. 1882년 7월 23일(고종 19년, 임오년), 조선의 구식 군대가 별기군(근대식 ..
-
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의 속성값에 대하여 지난 시간 박스예..
-
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는 화면 크기 변화에 대응하는 웹사이트를 만드..
-
식품의 영양표시를 알고 내 몸 챙기자구요몰상식 (몰라도 되는 상식) 2021. 4. 9. 19:30
우리가 마트나 시장에서 가공물을 구매해서 먹게 되는데 대부분 식품의 제목이나 미디어 매체를 통해 익숙한 식품을 고르게 됩니다. 하지만 가공물의 내용물이 정확히 어떤 성분으로 되어 있는지는 알지 못하죠. 상표와 같이 부착되어있는 영양소들의 글씨체도 작고 뭐가 뭔지도 잘 모르기에 그냥 넘어가기도 하지요. 그래서 살아가는데 특별한 지장은 없지만 궁금증이 생기더라구요. 영양관련된 용어와 표시방법등을 조금은 정리를 해봐야 겠어요. 1. 영양성분 식품에 함유된 성분으로서 에너지를 공급하거나 신체의 성장, 발달, 유지에 필요한 것 또는 결핍 시 특별한 생화학적, 생리적 변화가 일어나게 하는 것을 말합니다. 간단하게 필요한 성분을 뜻한다고 보면 되겠네요. 2. 영양성분 강조 제품에 함유된 영양성분의 함유사실 또는 함유..
-
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 같은 숫자를 사용합니다. 이는 폰트크기가 커지면 절대값만큼 같이 반영..