position속성에 대해 알아보자. - position은 요소를 배치할때는 어떠한 기준을 말한다. position은 요소의 위치를 직접적으로 배치해주는것이 아니고, 배치를 위해 기준을 작성해주는 속성이다. (기준->위치설정) 그 기준에는 기본값으로 static이있다. 스테틱은 기본적으로 배치를 할 수 없는 상태를 말한다. 그럼 배치를 할 수 있는 속성들에는 1. relative - 요소 자신을 기준 2. absolute - 위치 상 부모 요소를 기준 3. fixed -뷰 포트(브라우저)를 기준 position 값을 사용하여 기준이 마련되면 실제로 위치를 설정해줘야하는데 그때 사용하는 속성은 top bottom left right z-index가 있다. 기본값은 auto이고 top: { 10px; } 이..

글자와 상자의 개념을 살펴보자. - 요소가 화면에 출력되는 특성, 크게 2가지로 구분. 인라인(inline)요소 : 글자를 만들기 위한 요소들. 블록(block)요소 : 상자(레이아웃)를 만들기 위한 요소들. 1. 인라인 요소 대표적인 인라인요소로는 태그가 있다. 은 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 인라인요소는 기본적으로 왼쪽에서 오른쪽으로 수평으로 쌓이는 특성을 가지고 있다. 자세히보면 가운데 띄어쓰기가 있는것을 볼 수 있다. 인라인 요소는 글자 요소이기때문에 코드를 줄바꿈처리하면 하나의 띄어쓰기로 작동된다. 인라인 요소 인라인요소는 가로, 세로사이즈가 자신이 포함하고 있는 콘텐츠 크기만큼 자동으로 줄어든다. 이번엔 인라인요소에 css스타일을 적용해보자. 인라인 요소 ..

간단히 코드를 보며 부모와 자식 관계를 이해해보자. div태그를 만들고 그 안으로 들어가 새로운 div태그로 감싸주었다. 그랬을때 나중에 만든 div태그에는 처음에 만든 div태그와 어떠한 관계를 가지게 되는데 바로 부모와 자식간의 관계가 되는 것이다. 자식 이번에는 자식요소의 div태그 안으로 들어가 또 다른 div태그를 만들었다. 그랬을때 자식의 부모요소는 태그를 감싸고 있는 div고 그 상위(조상)요소는 그밖에 div태그를 감싸고 있는 또 다른 div태그인 것이다. 즉 상위(조상)요소는 나를 기준으로 나를 감싸고 있는 모든 요소를 지칭하는 것이다. (당연하게 부모요소도 포함시킴) 그럼 기준을 바꿔 이번에는 부모가 기준이 되면 자식의 자식요소니까 하위(후손)요소 라고 말한다.

시맨틱 웹과 시맨틱 태그?? 시맨틱 태그..이게 뭘까? 웹 기술의 발전에 따라 많은 수 많은 정보들이 웹상에 쌓이게 되었는데, 컴퓨터가 그 정보들을 보다 쉽게, 의미있는 해석할 수 있도록하기 위해 시맨틱 웹과 시맨틱 태그라는 웹 개념이 등장했다. -위키백과 음.. 더 쉽게 알아보자. 예를들어, 헤더의 위치를 잡아주기 위해 내가 헤더 코드를 작성했으면 태그 안에 '내가 헤더'라는 내용을 넣어주었기 때문에 '컴퓨터 사용자'는 이 자리가 내가 헤더임을 알 수 있지만, '컴퓨터'는 태그만으로 이 자리가 헤더임을 알 수가 없다. 물론, 태그 안에 id값을 header로 부여하여 내가 헤더 이렇게 나타낼 수도 있지만 id값을 부여하기위해서는 의미없는 div태그를 무조건 사용해줘야 한다. (div태그 남발은 좋은 습..