전체 글
-
CSS 기본(BOX 응용) : Content-Box, Border-Box,컴퓨터 알아가기/HTML CSS 2021. 3. 25. 19:30
CSS의 속성들중에는 기본값이 적용되어 있습니다. 이러한 기본값에는 스타일시트에 명시적으로 설정할 필요가 없습니다. 예를 들어 텍스트의 기본글꼴에 적용되는 가중치는 기결정되어 있지만 이 속성이나 값을 일부러 다시 지정해줄 필요가 없습니다. BOX모델도 기본속성이 적용이 됩니다. ▒ Box Model : Content-Box 이제까지 봐온 기본 BOX의 개념입니다. 즉, 우리는 Content에 들어가는 내용을 기준으로 Padding과 Border를 설정해 왔습니다. 이 3가지 값이 합쳐져 브라우저에 렌더링됩니다. 다음 예는 실제 웹페이지에 렌더링되는 넓이가 200px입니다. ▒ Box Model : Border-Box 웹페이지에 Box모델을 적용할 때 Contents값 및 Padding값과 Border값을..
-
CSS 기본(BOX) : Overflow (Scroll, Hidden, Display), Visibility (Hidden, Visible)컴퓨터 알아가기/HTML CSS 2021. 3. 24. 19:30
BOX형은 중요하다고 말씀 드렸습니다. 전체 HTML상에서 각자의 영역을 지정하고 그 영역안에서 움직인다고 보면 되는데 이러한 구획정리의 개념이 BOX형으로 이루어 진다고 보면됩니다. ▒ Overflow 다음과 같이 하나의 이미지 또는 내용이 있다고 가정합니다. contents, padding, border, margin을 이해하기 위해서 손으로 한번 그려보는 것을 권장합니다. 예에서 보면 각각의 크기가 다음과 같을 경우 Contents (blue): 가로 (300px), 세로 (200px) Padding (green): 좌 우 위 아래 각 10px Border (yellow): 좌 우 위 아래 각 2px Margin (orange): 좌 우 각 20px, 위 아래 각 10px 전체 이미지의 크기는 가로..
-
싹이 튼 고추씨앗 가식하기초보 밭농사 2021. 3. 23. 19:30
고추씨앗이 모종이 될려고 합니다. 대단한 도전이라고 지금 글을 쓰고 있는 이 순간에도 아직도 믿어지지는 않습니다만 고추씨앗이 모종이 될려고 하네요. 그 과정을 가능한 담아 볼게요. ▒ 꼬리가 나오기 시작 집에서 시작한거라 발아를 시키고 싹이 날까 궁금하던 차에 배양토에 씨앗 하나씩 옮겨 심은곳이 있고 스티로폴에 무작위로 뿌려 준게 있었습니다. 2일만에 꼬리가 그림처럼 나오더군요. 음... 꼬리라고 믿고 싶어졌다는게 더 정확한 표현입니다. ▒ 꼬리에 털이 생기다 퇴근 후 고추씨앗을 드려다보는 버릇이 생겼습니다. 그러다 다시 2일이 지났는데 꼬리에 버섯처럼 털이 생기기 시작했습니다. 아마도 뿌리를 만들려고 하는 과정인것 같습니다. 조그마한 트레이에 심은것 보다 스티로폴에 뿌린 씨앗이 먼저 꼬리에 털을 달기 ..
-
CSS 기본(BOX) : Padding, Margins, Margin - Auto, Vertical Margin, Horizontal Margin, Minimum and Maximum Height and Width컴퓨터 알아가기/HTML CSS 2021. 3. 22. 19:30
지난 시간에 이어 CSS의 주요개념인 BOX에 대해 좀 더 진도를 나가 보겠습니다. 물론 여러가지 디자인적 감각이 필요되는 분야이긴 하지만 최초 말씀 드렸듯이 구조에 대한 이해만 확실히 해두면 향후 필요시 응용할 수 있는 부분이 너무도 많습니다. 따라서 직접 외워서 코딩을 하는 개념이 아니라 어떤 구조인지를 먼저 알수 있도록 합시다. ▒ Padding 패딩(Padding)은 지난 시간에 언급했듯이 내용(Contents)과 Box가 형성되는 Border(테두리)사이의 공간입니다. 쉽게 생각하면 겨울에 내 몸(Contents)과 외부추위 (Border)를 막기위해 패딩점퍼를 입는다고 보면됩니다. 패딩속성은 내용(Contents)의 비좁은 느낌을 없애고 공간을 활용하여 잘 정리된 모습을 만들때 사용합니다. 다..
-
소주 한병은 소주잔으로 몇잔이 나올까?몰상식 (몰라도 되는 상식) 2021. 3. 19. 19:30
▒ 소주 한병은 몇잔이 나올까? 과거에는 퇴근 무렵이 되면 동네 골목 곳곳에 포장마차가 장사를 시작 했었습니다. 요즘은 실내포차라는 이름으로 건물 가게내에 여러가지 안주를 파는 곳이 대부분인데 예전의 정취만큼은 못한것 같더라구요. 불후의 명착인 '응답하라 1998'에서 우리네 아버지 역할(성동일 분 등)을 하신분들이 퇴근 후 골목 어귀에 천막으로 되어진 포장마차에서 홀로 술잔을 기울이는 것을 보면 과거를 상상할 수 있습니다. 저도 그런 시절을 겪은 사람으로서 가끔 너무 변해버린 주위를 보면 놀라기도 하지만 아쉽기도 합니다. 제 기억으로는 포장마차를 이용하는 주 목적은 가성비가 좋은 반면에 다양한 안주 먹거리들이 가장 큰 장점이고 주인장의 무한 국물 서비스는 훈훈한 정을 느끼에 하는 장점이었습니다. 당시에..
-
CSS 기본 (BOX) : BOX 기본구조, Width와 Height, Border, Border-Radius컴퓨터 알아가기/HTML CSS 2021. 3. 18. 19:30
이제는 CSS를 이해하는데 중요한 BOX 모델에 대해 이야기 해 볼려고 합니다. 네이버에서 개발자코드(F12)로 한번 들어가 보죠. 네이버 검색창은 BOX모양으로 되어 있으며 개발자코드에 다음과 같은 그림으로 확인이 가능합니다. 그럼 이러한 구조가 어떻게 되어 있고 어떤 명칭으로 사용되는지 알아보도록 하겠습니다. ▒ BOX 모델의 기본 구조 BOX모델은 다음과 같이 구분되어 있습니다. ▶ Width와 Height 내용(Contents)를 담는 박스형태로 구분된 사이즈는 넓이와 높이를 지정할 수 있습니다. ▶ Padding Padding은 내용영역과 테두리(Border)를 나타내는 영역사이의 공간을 말합니다. ▶ Border Border(테두리)는 내용영역과 Padding을 둘러싼 영역을 말하며 테두리의 ..
-
CSS 기본 : CSS 구조 (폰트, 폰트크기, 폰트가중치, 텍스트정렬, 색지정, 명암조절, !important)컴퓨터 알아가기/HTML CSS 2021. 3. 16. 19:30
이제는 어느정도 CSS의 기본 개념이 잡혔을 거라고 생각됩니다. 기본 개념하에 CSS구조(폰트, 폰트크기, 폰트가중치, 텍스트정렬, 색지정, 명암조절, !important)에 대해 확인하고 가겠습니다. ▒ CSS 구조 예를 들어 HTML 내 작성되어 있는 태그글 스타일링 하기 위해서 다음과 같이 CSS 문번으로 작성했다고 가정해 보죠. 상기 예에서 h1은 선택하여 지정한 요소입니다. 또한 color: blue ; 는 CSS를 선언했다라고 하는데 CSS의 선언은 속성 (color) 과 속성값 (blue)으로 구분이 되며 둘 사이에는 콜론(:)으로 연결을 합니다. 그리고 CSS 선언의 마지막은 세미콜론(;)으로 맺음을 하는 원리가 바로 CSS의 구조입니다. ▒ 폰트 (Font Family) 글꼴의 서체를 변..
-
CSS 기본 : 중첩요소 스타일링, 다중요소 스타일링컴퓨터 알아가기/HTML CSS 2021. 3. 15. 19:30
지난 시간에 이제 CSS가 어떻게 HTML과 연결되는자 style.css 파일을 이용하여 맛보기를 하였습니다. 여기에 class 및 id 속성을 이용하여 스타일링도 구조 이해를 해 보았습니다. 이번에는 중첩된 요소만을 지정해서 스타일링을 하는 방식과 심플한 코딩을 위하여 중복되는 요소를 같이 스타일링 하는 방식을 이해 해 보겠습니다. ▒ 중첩된 요소 스타일링 이번에는 하나의 Artcile에서 리스트 목록이 나타내어져 있는 요소들만을 지정해서 스타일링을 해 보도록 하겠습니다. 다음 예제는 서울을 나타내는 글입니다. 상기 브라우저에서 나타난 내역을 설명해 보면 ① '한국의 수도서울'은 빨간색으로 지정이 되어 있으며 조금 큰 글씨의 태그를 사용합니다. ② '조금 더 알아볼까요?'와 '서울의 상징물'과 '서울정..