프론트엔드

CSS skills(1) - display, float, position

이번 포스팅에서는 html에 css를 적용할 때 자주 사용하는 다양한 속성들에 대해 알아보도록 하자. display : inline-block; float position 기타 는 기본적으로 블록 속성을 가지고 있다. 그렇기 때문에 안에서 컨텐츠를 정렬하려고 할 때 인라인(inline) 속성을 가지고 있는 을 사용할 것이라고 생각할 수 있다. 하지만 실상은 그렇지 않다. 인라인 속성을 가지고 있을 경우 컨텐츠의 넓이와 높이 지정이 불가능하다. 인라인 속성은 기본적으로 자기가 가지고 있는 크기만큼의 영역만을 차지하기 때문에 넓이와 높이를 지정해 줄 수 있는 를 주로 사용해서 정렬을 한다. 이때 사용하게 되는 css가 바로 display: inline-block; 이다. 의 블록 속성을 인라인 속성으로 변환..

HTML 응용(1) - element들 간의 관계, 이미지 삽입하기

이번 포스팅에서는 앞서 배웠던 html 엘리먼트들을 활용하는 법에 대해 다루도록 하겠다. 엘리먼트들 간의 관계 이미지 삽입하기 엘리먼트들 사이의 관계에 대해 얘기하기 전에 우선 다음과 같은 코드로 html과 css를 작성하였다고 하자. 안녕하세요 환영합니다. /* CSS style sheet */ *{ margin:0; } #wrap{ background: red; height:500px; width:500px; } #header{ background: yellow; height:250px; width:250px; } 해당 코드를 실행한 결과는 아래와 같은 모습을 띠고있다. 앞서 배웠던 것처럼 엘리먼트 안에 두개의 를 작성 할 경우 페이지에 두개의 영역이 블럭 속성으로 자리잡게 된다. 그렇다면 두개의 를..

CSS (1) - CSS 적용 방법

css에서 스타일을 주는 방법에는 세가지가 존재한다. 이번 포스팅에서 css의 적용 방법에 대해 알아보자 인라인 style을 활용한 css 적용법 엘리먼트를 활용한 css 적용법 외부파일 생성을 통한 css 적용법 이 방법은 특정 엘리먼트에 style이라는 속성을 주고 속성값 변경을 통해 css를 적용하는 방법이다. 내용 2 3 4 5 6 위의 코드를 살펴보면 엘리먼트 안에 있는 엘리먼트의 style 속성을 이용해 해당 엘리먼트가 웹페이지 상에서 차지하는 영역에 스타일을 준 것을 알 수 있다. 에서 font-size:12px;를 이용해 폰트 사이즈를 12px로 변경하였고 background:red;를 이용해 해당 엘리먼트가 차지하고 있는 영역만큼에 색상을 넣을 수 있다. 여기서 background:red..

HTML 코드 (1)~(2)

Hello, World!! ingoo 제목1 제목2 제목3 제목4 제목5 제목6 리스트1 리스트2 리스트3 리스트4 링크 구글로이동 영역 작은영역 작은영역2 영역2 로그인 남자 여자 사람아님 컴퓨터 영화 독서 운동 잠

HTML의 기초(2) - <a>, <input> element

HTML 엘리먼트의 속성 엘리먼트 엘리먼트 속성 : 해당 엘리먼트가 가지고 있는 기본 구성요소들을 지칭. 앞서 언급한 인라인속성과 블럭속성이 하나의 예이다. 인라인(inline)속성과 블럭(block)속성은 display 속성 안에 있는 2가지 요소값이다. 엘리먼트 ~ 웹사이트에서 아이콘을 클릭하면 주소가 바뀌고 새로운 화면이 랜더링 되게 된다. 여기서 주소를 바꾸는 행위의 html 엘리먼트가 바로 이다. (a는 anchor를 의미) 엘리먼트에는 href라는 속성값이 존재한다. href=" " 에는 어느 링크로 이동시킬 것인지 그 값을 정해줘야 한다. 즉, href는 링크를 거는 속성이고 그 안에 들어간 값이 해당 링크로 이동하는 값이다. +) 엘리먼트는 display 속성이 인라인(inline)속성이다..