전체 글

css position 속성은 html요소의 위치를 결정합니다. 요소의 위치를 결정하는 방법에는 네가지 방법이 있습니다. 1. static position (정적 위치) static position은 포지션 속성의 기본 값으로 아무것도 설정하지 않았을 때의 값과 같습니다. 왼쪽에서 오른쪽, 위에서 아래로 차례대로 위치됩니다. (top, bottom, left, right 속성에 영향을 받지 않습니다.) 2. relative position (상대 위치) static position을 기준으로 top, bottom, left, right 속성을 이용해 이동하는 속성입니다. 여기서 top은 위로 이동한다는 뜻이 아니라 top:100px 이라면 위에서 100px 만큼 이동한다는 뜻입니다. bottom, lef..

이번 시간에는 HTML 요소들이 가지고 있는 디스플레이 속성에 대해 알아보겠습니다. HTML 요소들은 디스플레이 속성을 지니고 있습니다. 이 속성에 따라 웹에 HTML 요소가 어떻게 표시되는지 결정됩니다. HTML 요소들은 두 가지로 나뉩니다. 하나는 블록 요소(block element), 두 번째는 인라인 요소(inline element)입니다. 1. 블록 요소(block element) 블록 요소는 항상 새로운 줄에서 시작하며 한 줄을 모두 그 요소가 차지합니다. 블록 속성을 가지고 있는 요소의 종류에는 태그, 태그, 태그, 태그 등이 있습니다. (참고 - choirim.tistory.com/5 - HTML 태그(tag) ) 블록 요소 중 태그 글에서 설명하지 못한 태그는 html 요소들을 하나로 묶..

이번 글에서는 css 박스 모델에 대해서 알아보겠습니다.모든 HTML 요소들은 네모난 박스 모양의 영역을 가지고 있습니다. 이 박스는 내용(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성되어있습니다. 박스의 맨 안쪽에 위치하고 있는 content는 html 요소의 텍스트, 이미지 등 실제 내용이 위치하는 영역입니다. content 영역을 감싸고 있는 padding 영역은 content와 테두리(border)영역 사이의 간격을 나타냅니다. 실제로 눈에 보이지 않고 투명하며 content에 적용한 background-color는 padding영역까지 적용됩니다.border영역은 content를 감싸는 테두리 영역을 의미하며 margin 영역은 border 값 바깥..

이번 글에서는 CSS값을 적용할 때 어떤 값이 우선 순위가 되는지 알아보겠습니다. CSS는 Cascading Style Sheet의 약자입니다. CSS의 맨 앞을 차지하고 있는 Cascading이란 무엇일까요? Cascading이란 계단식, 작은 폭포라는 뜻입니다. 계단식의 작은 폭포에 윗물과 아랫물이 있는 것처럼 CSS에는 우선순위가 있습니다. CSS를 적용할 때 사용되는 태그 선택자, id 선택자, class 선택자, 스타일 속성 등 중에서 어떤 것이 가장 우선으로 적용되는 지 함께 알아봅시다. first 이런 html 문서가 있다고 가정해 봅시다. 첫번째 요소에 태그 선택자, id 값, class 값, 스타일 속성을 한꺼번에 준다면 어떤 속성이 적용될까요? first result first oran..

choirim.tistory.com/11 - CSS란 무엇일까? 저번 글에서 우리는 css의 개념과 css를 적용하는 방법에 대해 알아보았습니다. css 선택자(selector)는 css를 적용시킬 html요소 부분을 의미하였습니다. 이번에는 그 css 선택자(selector)에 대해 자세히 알아보겠습니다. 😀 CSS 선택자(Selector)에는 HTML 태그 선택자뿐만 아니라 다양한 선택자들이 있습니다. 함께 차근차근 알아봅시다. 1. 태그 선택자 저번 글에서 보았듯이 기본적으로 선택자에 html 태그를 넣어주면 html요소에 css가 적용됩니다. h1 { color:red; } 2. 그룹 선택자 여러 선택자를 함께 사용하고 싶을 때는 쉼표( , )를 이용해 적용해주면 됩니다. h1, h2 { colo..

html과 자주 같이 언급되는 css! 이번 시간에는 css에 대한 궁금증을 해결해보겠습니다. css란 무엇일까요? choirim.tistory.com/category/HTML - CSS를 공부하기 전 알아야 할 HTML HTML은 웹페이지를 구성하는 가장 기본적인 언어였습니다. HTML를 이용해 웹페이지를 만든 사람들은 그 페이지가 디자인적으로도 예쁘길 바랬습니다. 그걸 만족시켜주는 것이 바로 CSS입니다. 밑의 html 문서를 웹 페이지에 띄운다고 가정해보겠습니다. css란 무엇인가 css의 개념 css는 과연 무엇일까요. result css란 무엇인가 css의 개념 css란 과연 무엇일까요. 그런데 제목을 빨간색으로 바꾸고 싶어 졌습니다. 그때 css를 이용하면 됩니다. ex) h1 { color:..

choirim.tistory.com/5 #2. HTML 태그(tag) choirim.tistory.com/4 #1. HTML란 무엇인가 오늘은 HTML에 대해서 알아보겠습니다. 👀 어디선가 들어본 HTML. 정확하게 어떤 것을 의미하는 걸까요? HTML은 의 약자입니다. 먼저 Hyper Text란 정해져있는 기존 choirim.tistory.com 저번 글에서는 HTML태그의 의미와 종류에 대해 알아봤습니다. 저번 시간에는 텍스트, 링크, 이미지에 관련된 태그들을 봤다면 이번 시간에는 웹 페이지를 구성하는 HTML의 기본 구조와 그 구조를 이루는 태그에 대해서 알아보도록 하겠습니다. HTML은 기본적인 구조를 가지고 있습니다. 어떤 구조인지 한 번 살펴볼까요? 아래가 그 구조입니다. 본문 크게 1. 2...

컴퓨터 프로그래밍, 즉 의 합성어입니다. '컴퓨터를 프로그래밍하다.'라는 말인데요. 여기서 컴퓨터는 알겠는데, 프로그래밍은 무슨 말인지 정확히 모르겠습니다. 프로그래밍이란 무엇일까요? 프로그래밍은 프로그램을 만드는 것입니다. 여기서 프로그램이란 '계획'을 말하는데요. 진행될 절차들을 미리 계획해놓은 것들을 '프로그램'이라고 합니다. 교육 프로그램, 행사 프로그램, 컴퓨터 프로그램이란 단어들을 예시로 들어보자면 교육 프로그램은 교육이 진행될 절차들을 미리 계획해 놓는 것, 행사 프로그램은 행사가 진행될 절차들을 미리 계획해 놓는 것, 그리고 우리가 궁금한 컴퓨터 프로그램은 컴퓨터가 실행할 절차들을 미리 계획해 놓는 것이라고 할 수 있겠죠. 여기서 계획한 절차를 써놓는 시트가 실행문이라고 할 수 있겠네요. ..