성사의 오두막

홈페이지 만들기 2번째다. 이번주는 부분을 모두 마무리 하자는 목표를 세웠다. 그럼 오늘도 열심히 공부하고 만들어보자! link 태그는 연결고리? 메타태그에 이어 나에 눈을 사로 잡은 태그가 있다. 바로 link 태그!!! 현재 만드는 홈페이지에는 11개의 링크태그문이 있다. 영어로 적힌대로 무언가를 연결하는 연결고리인것 같다. 정확한 용도를 알아보자. 태그는 외부 리소스 연결요소로 현재 웹문서와 리소스의 관계를 연결하는데 제일 많이 사용된다. 링크함수 구성을 보자면 아래와 같다. 여기서 rel은관계(relationship)을 이야기한다. 우리가 동주민센터 가서 가족 이름으로 무언가 발급 받을때 말하는 바로 그 관계, 여기서는 "다음에 올파일은 이 웹문서의 "stylesheet"입니다." 라고 이야기 하..

작년부터 생각했던 나만의 홈페이지 만들기를 시작했다. HTML, CSS, Javascript까지 어느정도 공부를 했다고 생각했는데, 막상 혼자 만들려고 하니 어디서 부터 손을 대야 할지 모르겠다는 생각이 들었다... 그래서 우선 유튜브로 대뜸 '홈페이지 개발, 홈페이지 만들기' 검색하고 만드는 방법들을 두루 시청했다. 그리고 기존에 만들어진 HTML, CSS 무료 템플릿을 가지고 와서 만들자고 결정하게 되었다. 구글로 'html css template'를 치고 나온 사이트중 free-css 사이트에서 맘에 드는 템플릿을 골랐다. 내가 고른 홈페이지는 "BROWNY FREE CSS TEMPLATE"로 누군가 감사하게도 공유해준 템플릿이었다. LIVE DEMO를 열어보니 개발자 이력을 소개하는 템플릿이었다...

position은 웹상에 요소를 배치하는 방법을 지정합니다. ◎ static : 요소를 일반적인 문서흐름에 따라 배치합니다. ◎ relative : 요소를 일반적인 문서흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. ◎ absolute : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않습니다. 대신 가장 가까운 위치된 조상 요소에 대해 상대적으로 배치합니다. ◎ fixed : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 배치합니다. ◎ sticky : 요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함..

float는 '뜨다'라는 의미로 웹페이지에서 컨텐츠(글, 이미지)를 어떻게 표시해서 다른 컨텐츠들과 배치할 것인가에 대한 속성이다. ◎ left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. ◎ right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시됨. ◎ none: 요소를 부유시키지 않음 ◎ inherit: 부모 요소에서 상속

overflow는 박스안에 컨텐츠(글, 이미지)를 보여주기에 충분한 공간이 없을 경우, 박스를 벗어나는 컨텐츠를 어떻게 다룰 것인지 설정합니다. ◎ 속성1 : visible 영역을 벗어난 부분을 짜르지 않고 눈에 보이게 함. ◎ 속성2 : hidden 영역을 벗어난 부분을 숨겨서 눈에 안보이게 함. ◎ 속성3 : scroll 영역을 벗어난 부분과 상관없이 자동으로 스크롤 생기게 만듦. * overflow-x:scroll : 가로축 스크롤 생성. * overflow-y:scroll : 세로축 스크롤 생성. ◎ 속성3 : auto 영역을 벗어난 부분이 있으면, 자동으로 스크롤 생기게 만듦. ◎ 속성3 : inherit 부모요소 속성을 상속함.

◎ width: 100%로 지정한 경우에는 : 창의 크기를 줄이거나 늘리면 창의 너비에 맞춰 크기가 충실히 증감한다. ◎ 가로 너비 값을 아무 것도 지정하지 않은 경우 : 창의 크기를 줄여도 이미지 크기에 아무런 변화도 없다. ◎ max-width: 100% 로 지정한 경우 : 창의 크기를 줄이면 줄인만큼 충실히 줄어들지만, 크기를 키울 때는 원래 이미지 사이즈보다 커지지는 않는다. 출처: https://ccuram.tistory.com/29