HTML (7) 썸네일형 리스트형 HTML + CSS 주요 개념 정리(8) - 마무리 이제 마지막으로 html 간단한 동적인 그림을 표현해보겠습니다 앞서 이전에 여러 가지 방법으로 동적인 표현이 가능하고 제가 생략한 부분이 많습니다. 다만 제가 중요하게 생각하고, 좀 신선 한걸로만 복습 차 작성하는 것입니다. 1. anmation.css 추가하여 동적이 표현 추가 이전까지는 html과 css 파일을 이용하여 웹페이지를 구성하였는데 이제 또 하나의 css파일을 추가 하여 동적인 표현을 추가하였습니다. 이름은 animation.css를 했으므로 단순히 같은 css파일지만 동적인 부분과 레이아웃 부분을 따로 코딩하여 나중에 수정할 때 가독성 부분에서 용이하게 하기 위하여 따로 둔 것입니다. 우선, index.html를 보겠습니다. 그림을 보면 라는 구문이 보일 겁니다. 이건 간단하게 생각하면 .. HTML + CSS 주요 개념 정리(7) - 레이아웃에 영향을 미치는 요소 Ⅲ 레이어에 Z 축 조정에 영향을 주는 z-index 속성과 브라우저의 왼쪽, 오른쪽 끝에 공간을 배치할 때 사용하는 float와 clear 속성에 대해 알아보겠습니다. 1. 레이어 z축을 조정하는 속성, z-index z축z 축 개념을 어렵게 생각할 필요는 없습니다. 수학에서 x, y 축과 z 축이 있든 html에서도 그런 개념이 존재하는 것이죠. 다만 우리가 보는 웹페이지는 우리가 현실에서 3차원을 보듯 보는 방식이 아닙니다. 마치 우리를 위에서 쳐다보는것 과 같은 방식으로 우리는 웹사이트를 바라보는 것이죠. 이해하기 편하게 그림으로 보여주겠습니다. 이런 식으로 보이기 때문에 우리는 여기서 몇 가지 주의할 점이 있습니다. 간단한 예제로 Z축의 개념과 주의할점을 알알 보겠습니다. 우선 저는 z-index-.. HTML + CSS 주요 개념 정리(6) - 레이아웃에 영향을 미치는 요소 Ⅱ 저번 글에 display 속성과 positon속성을 알아보겠다고 했느네, 바로 가보자! 1. display 속성으로 HTML 태그의 혈앨형 바꾸기 display 속성은 HTML 태그가 가진 두 가지 혈액형인 Block 요소와 InLINE 요소를 사용한다. 여기서 혈액은 요소의 고유특징이라고 생각하시면 됩니다. Block 요소와 Inline 요소에는 다음 세 가지 특징이 있다. 줄 바꿈 현상 유무 width 와 height 속성 적용 유무 margin-top, margin-bottom, padding-top, padding-bottom 속성 적용 유무 Inline 요소의 혈액형을 가진 태그의 특징을 살펴보자! 태그는 inline 요소의 특징을 가지므로 줄 바꿈 현상이 안 나타남. 또한 width, heig.. HTML + CSS 주요 개념 정리(5) - 레이아웃에 영향을 미치는 요소 Ⅰ 지금부터 웹 사이트 레이아웃에 영향을 미치는 CSS 주요 요소를 알아보겠습니다. 개인적으로 웹사이트를 구성할 때 까다로우문 부분이 '마진 병합 현상'이라는 개념인데 이 부분을 알아보겠습니다. 1. 박스 모델 HTML 태그는 우리 눈에는 안 보이지만 여려 개의 박스가 겹쳐 있는 박스 모델 형식입니다. 박스 모델에는 박스의 크기와 반스 간격을 정의하는 네 가지 요소(margin, border, padding, content)가 있다. 그러면 예제를 통해서 박스 모델이 어떻게 구성되는지 좀 더 확실하게 알아보자. 아래 그림과 같이 width, margin, padding 등의 값을 설정해보고 웹페이지에서 실행해 본다. 2. 박스 모델의 4가지 요소 박스 모델에서 간격을 정의하는 요소를 이제 대충 슬슬 아실 거.. HTML + CSS 주요개념 정리(4) - CSS 사용하기 1. 부모 자식 간의 css상속 HTML은 필연적으로 태그가 태그를 포함하는 구조인데, 이러한 구조를 부모-자식 관계라고 합니다. 예제 코드를 보면 태그 안에 과 태그가 포함되어 있습니다. 여기서 상위에 있는 태그를 '부모'라고 하고, 하위에 있는 과 태그를 '자식'이라고 합니다. 그리고 과 태그를 서로 '형제'라고 표현합니다. 상속이라는 개념을 알아야 되는 이유는 header 태그에 속성을 적용하면 다 함께 적용되기 때문이다. header 태그에 파란색을 적용하니 전체적으로 다 파란색으로 적용된 것을 볼 수 있다. 2. css 속성의 우선순위, 캐스케이딩 케스케이딩은케스케 이딩은 같은 영역에 같은 디자인을 적용했을 때 어느 디자인을 우선해서 적용하는지를 나타냅니다. 케스케 이딩은 다음 세 가지가 우선순.. HTML + CSS 주요개념 정리(3) - CSS 이용 1. HTML 문서에 입력된 정보나 공간에 CSS 디자인 효과를 적용하려면 다음 세 가지 방법 중 하나를 이용. 인터널 방식: HTML 문서 안에 태그를 사용하여 적용하는 방식 인라인 방식: HTML 태그 안에 style 속성을 사용하여 적용하는 방식 익스터널 방식 : CSS 파일을 생성하여 HTML 문서와 연동하는 방식 2-1. 인터널 방식 인터널 방식은 태그 안에 태그를 사용하여 CSS를 적용하는 방식입니다. 여러개의 Hello World 중 태그를 선택한 글만이 빨간색이 적용된 모습을 볼 수 있습니다 2-2. 인라인 방식 인라인 방식은 HTML 태그에 직접 style 속성을 추가하여 적용하는 방식입니다. 태그 안에 style 속성을 추가하여 "background-color: yellow;"를 입력하.. HTML + CSS 주요 개념 정리 (1) - HTML 구성 요소 웹프로그래밍 언어를 공부할 때 사용한 텍스트 편지기는 서브라임 텍스트를 사용. HTML은 index파일과 css파일을 합으로 사이트를 구성됨. # 1. HTML의 주요태그 태그 : anchor의 약자로 정박지 또는 닻을 뜻한다. 태그의 콘텐츠를 클릭하여 특정 영역이나 특정 페이지로 이동한다. 보통 메뉴 버튼을 만들 때 사용. 태그 : image의 약자로 정보성 이미지를 삽입할 때 사용 ~태그 : , ... , 태그는 신문 기사로 치면 헤드라인에 해당. 일반적으로 웹 사이틔 제목이나 부제목처럼 중요하다고 생각되는 정보에 사용. 태그 : paragraph의 약자로 단락을 표현할 때 사용. 신문 기사로 치면 본문 영역에 해당 태그 : 문단 안에 있는 특정 단어나 문장에 디자인을 지정할 때 사용. 태그 : 국어.. 이전 1 다음
