DesignDev

padding과 margin의 공통점은 둘다 여백이라는 점이다. 그 중에서 나뉜다면 안쪽여백과 바깥여백이 있는데 margin은 바깥여백 padding은 안쪽여백 이다. 패딩10px 마진10px 위 태그 구조에 스타일을 입혀봤다. 스타일을 적용시키면 다음과 같다. padding은 다음과 같다. 보더 안의 패딩이라는 영역에서 상하좌우 10px씩 늘어난 것을 볼 수 있다. 그래서 아이템을 선택했을시 120x120로 늘어난 것을 볼 수 있다. 한마디로 안쪽에서 부풀어 오른것이라고 생각하면 쉽다. 그에 반해 마진은 보더 밖의 값이 상하좌우로 10px씩 늘어났다. 보더 밖이므로 아이템자체에는 영향이 없다. 다만 바깥여백이 늘어난것이므로 아이템자체가 10px씩 배경이든 아이템이든 다른 무언가로부터 띄어진다.

html에는 중요도에 따라 h1부터 h6태그를 쓴다. h1태그는 검색엔진에서 검색랭킹을 올리는 역할을 하기때문에 가장 중요한 메인로고를 주로 h1에 쓴다. 그 다음에 중요한 것으로 h2, h3 ...h6태그까지 쓸 수 있다. h1메인로고 h2대메뉴 h3서브메뉴 위의 코드를 실행하면 다음과 같다. 기본적으로 폰트의 크기와 굵기가 지정되지만 css의 style로 조정 가능하다. 또한 h1안에는 텍스트뿐만아니라 다른 태그도 들어갈 수 있다. 메인로고 위 코드를 실행하면 다음과 같다. h1태그안의 a태그때문에 원하는 곳으로 링크를 걸 수 있다.

과 은 목록태그 이고 는 리스트 태그이다. ol태그와 ul태그 안에는 무조건 li태그가 들어가야 한다. ol태그는 orderlist의 줄인말로 순서가 표기되어있는 목록이다. 메뉴1 메뉴2 메뉴3 메뉴4 위 코드의 결과물은 다음과 같다. li태그 내용 앞에 숫자로 표기된다. ul태그는 unorderlist의 줄인말로 순서가 안 표기된 목록이다. 메뉴1 메뉴2 메뉴3 메뉴4 위 코드의 결과물은 다음과 같다. 앞에 가운데 점이 붙여진다. 이 점을 없애는 방법은 다음과 같다. css style에 ul에게 list-style: none; 속성을 넣어준다. 실행결과는 위와 같다. 이런식으로 리스트를 구성할 수 있다.

는 이미지를 삽입하는 HTML의 태그이다. 태그는 그 자체로 컨텐츠이므로 닫는 태그가 없다. 태그에 사용되는 태그 속성에 대표적인건 다음과 같다. src 태그 속성을 이용해 파일 확장자까지 써주는 2가지 방식으로 이미지를 불러올 수 있다. 내장 파일을 가져오는 방식에 대해서는 절대경로와 상대경로가 있는데 이는 추후에 알아보도록 하자. alt 태그 속성도 추가해야한다. alt 태그 속성의 내용은 시각장애인을 위한 스크린리더기에 읽히므로 해당 이미지를 잘 설명할 수 있는 단어로 써야한다. 이를 지키는 것이 웹 접근성을 지키는 것이라고 할 수 있다. 그 외에도 다음과 같은 태그 속성이 있다. - height : 이미지의 높이 (세로 크기) - width : 이미지의 너비 (가로 크기) - align : 이미지..

a태그는 로 이루어져 있다. a태그의 핵심기능은 하이퍼링크를 걸어주는 태그로 다음과 같이 표기한다. 네이버 //네이버(글자) 클릭시 네이버로 이동 a 여는태그 안에 href라는 태그 속성을 써서 링크를 단다. href는 hypertext reference의 줄임말로 href=" "안에 링크를 달아주면 컨텐츠를 클릭시 해당 링크로 이동한다 . 위의 코드는 페이지에서 페이지로 넘어가는 코드이다. 페이지에서 새 창으로 띄울려면 다음과 같다. 네이버 //네이버(글자) 클릭시 새창으로 네이버로 이동 target이라는 태그 속성을 추가해준다. target의 기본값은 target="_self"이다. 기존 페이지에서 그대로 다른 페이지로 이동한다. 태그 속성 값으로 "_blank"를 넣으면 해당 링크가 새창으로 열린다.

CSS는 Cascading Style Sheet를 축약한 용어이다. Cascading의 사전적 뜻은 다음과 같다. 폭포가 위에서 아래로 흘러가듯이, 폭포의 원리를 빌린 우선순위를 뜻한다. Cascading+style sheet로 정보를 표현하는(뼈대가 있는) HTML에 스타일을 지정하는(꾸며주는) 언어이다. 여기서 꾸밈은 뼈대를 갖춘 문서에 색상, 글꼴, 이미지의 크기나 배치 등을 말한다. HTML과 같이 프로그래밍 언어가 아니며 꾸밈에 있어 우선순위가 있는 스타일 시트라고 이해하면 쉽다. 현재는 CSS3까지 나왔으며 HTML과 같은 문서에 쓸 수도, 각각 다른 문서에 쓸 수도 있다.

HTML은 Hyper Text Markup Language의 줄임말이다. 텍스트는 정보를 전달하기 위해 작성된 문서를 말한다. 그래서 텍스트로 작성된 정보를 습득하기 위해서는 책을 읽듣이 처음부터 끝까지순차적으로 접근해야한다. Hyper Text Markup Language를 나눠서 보면 다음과 같다. Hyper Text / Markup Language Hyper Text 앞의 하이퍼텍스트는 뛰어넘다라는 뜻의 하이퍼와 앞에 서 말한 텍스트의 조합으로 "텍스트를 뛰어넘다(초월하다)"라는 뜻을 담고 있다. 뛰어넘는다는 것은 비유를 하자면 부분부분 점프를 하며 나아가듯 순차적으로 나아가는게 아닌 비순차적으로 접근할 수 있다는것을 뜻한다. HTML문서는 문서와 문서가 하이퍼링크(링크)로 연결되어 있기때문에 각 ..