Position 포지션은 말그대로 문서에서 위치를 어떻게 적용할것인가에 대한 부분이다. Static#box{ background-color: red; top: 100px; left: 100px; } static은 position을 정하지 않았을때 디폴트 값이다. 위와 왼쪽에 100px을 줬음에도 움직이지 않는다.이름처럼 고정되어 있다. Relative position 값을 Relative로 지정해주면 본인이 있던 기존 위치를 기준으로 움직인다.원래 있던 자리에서 위아래 100px씩 움직인 결과물이다. Absolute 딱 처음 들었을 때 가장 이해가 안가던것이 앱솔루트였다.앱솔루트는 원래 본인이 차지하던 블록이나 인라인에서 없는 취급을 받는다. 그리고 html상 본인의 부모를 ..

Box 크롬에서 F12를 눌러서 이것저것 보다보면모든것들이 Box 모양으로 되어있다.   박스 끼리의 간격이 margin테두리가 border테두리에서 컨텐츠까지의 간격을 padding 그리고 모서리로 그려져있는 저 네모의 가로세로를 width, height 요소로 적용 가능하다.  박스1박스2박스3박스4박스5박스6div{ color: white; width: 100px; height: 100px; background-color: blue; margin: 10px; border: 5px solid black; }#box3{ padding: 10px;} 이런식으로 여러가지 요소들을 적용한 스타일을 볼 수 있다. 다만 여기서 box3에만 패딩을 적용하여 혼자 크기가 커..

CSS  CSS (Cascading Style Sheets) html로 이루어진 단조로운 웹페이지를 예쁘게 꾸며주는 역할을 한다.  CSS 의 구조 CSS의 전체 구조는 rule set이라 부르며 맨 앞의 선택자, 속성:속성 값으로 이루어진 선언으로 이루어져 있다. CSS 를 위한 link 태그  link 태그의 rel속성은 relation의 줄임말로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시한다.이런식으로 입력을 해주면, app.css를 연결해 stylesheet으로 쓸것을 명시하고 있다. 선택자전체 선택자*{ color: magenta;}전체 요소들에 스타일을 부여한다.  요소 선택자 button{ color:magenta;} 요소 선택자는 지정된 타입의 모든 항목을 선택해서 스타일을 부여한..

취미로 웹을 조금씩 공부해보려고 한다.회사에서 일하면서 간단한 운영툴 정도는 직접 만들 수 있으면 훨씬 좋지 않을까 라는 생각이 들기도 했고,만들고 배포하는것 자체가 어플보다 훨씬 접근성이 좋기 때문에 배워두면 나쁘지 않겠다는 생각이 들었다. 정말 간단한 웹을 만들 정도만 조금씩 공부를 할 예정이다. HTMLHyperText Markup Language Hyper Text 는 초월적인 문자로 일반적인 문자가 선형적으로 이동하는것과 다르게 (책으로 예를들면 1쪽에서부터 2쪽으로 봐야하는)웹페이지가 저기 페이지로 갔다가, 이쪽 페이지로 왔다가 할 수 있듯이 비선형적으로 움직이는 문자를 말한다. MarkUp Language 는 문서나 데이터의 구조를 기호나 태그를 통해 표시하는 언어다. 요약하면 HTML은 태..