컴퓨터 알아가기/HTML CSS
-
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 전체 이미지의 크기는 가로..
-
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)의 비좁은 느낌을 없애고 공간을 활용하여 잘 정리된 모습을 만들때 사용합니다. 다..
-
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에서 리스트 목록이 나타내어져 있는 요소들만을 지정해서 스타일링을 해 보도록 하겠습니다. 다음 예제는 서울을 나타내는 글입니다. 상기 브라우저에서 나타난 내역을 설명해 보면 ① '한국의 수도서울'은 빨간색으로 지정이 되어 있으며 조금 큰 글씨의 태그를 사용합니다. ② '조금 더 알아볼까요?'와 '서울의 상징물'과 '서울정..
-
CSS 기본 : <style>태그, style.css, class속성, id속성컴퓨터 알아가기/HTML CSS 2021. 3. 10. 19:30
본격적으로는 CSS 관련 첫번째 시간입니다. 지난 시간에 개념에 대해 이해를 하는 시간을 가졌고 지금부터는 어떻게 꾸며진 HTML 언어를 스타일링 하는지 차근 차근 연습해 보는 시간을 갖도록 해볼게요 ▒ 태그 일반적으로 CSS 언어를 사용할 때 만들어지는 index.html 과 같은 디렉토리에 style.css라는 파일을 별도 만들어서 진행을 합니다만 그전에 좀 더 개념을 잡기 위하여 태그를 HTML 문서에 직접 사용해 보겠습니다. 태그는 태그 사이에 위치하며 태그의 글씨크기(font-size)와 글씨체(font-family) 그리고 색(color)을 지정해 보고자 합니다. 지정하는 문법은 태그에 스타일링을 위하여 다음과 같이 p와 중괄호로 묶어줍니다. ▒ 확장자 .css 파일 개발자들은 HTML과 CS..
-
CSS 기본 : CSS 소개, 인라인스타일컴퓨터 알아가기/HTML CSS 2021. 3. 9. 19:30
웹사이트를 만들때 기본이 되는 HTML (Htper Text Mark-up Language)에 최소 알아야 할 내용은 7번에 걸쳐서 정리해 보았습니다. 아무리 쉬운 언어라 하더라도 그것도 글로써 7번만에 완성이라는 개념은 말에 무리가 있는 것 같고요. 처음부터 이 블로그의 핵심은 개발자를 위한 컴퓨터 프로그래밍 언어를 공부하는 전문 사이트가 아닌 최소한 컴퓨터에 친숙하기 위한 과정이라고 말씀 드렸고 지금도 변함이 없습니다. (사실 누구를 가르칠 실력도 안되고요) 그래도 개념을 조금씩 알아가기에 그만큼 친숙한 것 같습니다. 그래서 HTML의 짝꿍인 CSS에 대해 진도를 나가볼까 합니다. 미리 말씀 드렸지만 CSS는 HTML이 만든 Frame에 Style을 가미한다고 보면 되는데 조금 더 이해를 해 보고 갈..