이번 포스팅에서는 css를 작성할 때 사용되는 문법에 대해 간략히 짚고 넘어가보자. html과의 비교를 통해 css의 문법에 대해 간략히 알아보자. html에서 속성값을 넣을 때는 queryString의 형태를 띤다. 여기서 queryString 형태란 key=value의 형태를 띠고 있는 것을 말한다. html의 엘리먼트에서 속성을 부여할 때 다음과 같이 작성하게 된다. 반면 css의 경우, object 형태와 비슷한 형태를 띠고 있다. (css가 object인 것은 절대 아니다. 단지 형태가 비슷할 뿐) css 생성 형태는 queryString과는 다른 형태로 key : value 형태를 띠고 있다. 또한 css에서는 따옴표" "를 사용하지 않고 끝에 세미콜론(;)이 붙는다. 아래의 코드를 보면 쉽게..

css를 잘하기 위해서는 속성과 속성값들을 많이, 그리고 정확히 아는 것이 중요하다. 이번 포스팅에서는 css의 속성들에 대해 살펴보자. CSS의 width와 height CSS의 margin CSS의 padding padding과 margin의 차이점 정리 설명을 진행하기에 앞서 아래와 같이 작성된 html 파일과 css 파일이 존재한다고 하자. 해당 코드의 실행 결과를 참조하여 css의 속성들에 대해 알아보도록 하겠다. 1 2 3 /* CSS style sheet */ /* width height margin 과 padding */ #header{ background:red; height:60px; } #visual{ background: blue; height:250px; margin-bottom:..

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

css란? css의 역할 css와 html의 관계 CSS(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로 HTML에서 주로 쓰인다. CSS는 HTML과 같은 하나의 언어다. 그리고 이 언어의 목표는 디자인하는 것에 최적화 되어있다고 볼 수 있다. css는 기본적으로 html을 꾸며주는 역할을 한다고 보면된다. 기존에 가지고 있던 엘리먼트의 속성을 변경시켜주는 역할을 하는 것이 css이다. 예를 들면 display가 블럭인 것을 인라인으로, 인라인인 것을 블럭으로 변경하는 등 요소를 내 마음대로 조절할 수 있다. 더 나아가서 글자크기, 색상 등도 조절할 수 있다. ex) 엘리먼트의 속성은 블럭형태, css를 활용..

HTML에서 table 생성하기 HTML에서의 핵심 내용 요약 html에서 엘리먼트를 사용하여 테이블을 만들고 이를 활용해서 게시판, 회원가입 페이지 등과 같은 것들을 만들 수 있다. html을 이용하여 웹페이지 상에 테이블을 생성하기 위해서는 우선 다음과 같은 프로세스를 따라야 한다. row를 생성한다. column을 생성한다. 엘리먼트는 기본적으로 엘리먼트 안에서 작성한다. 그리고 row를 생성하기 위해서는 엘리먼트, column을 생성하기 위해서는 엘리먼트를 사용한다. 아래의 코드를 보고 좀 더 이해해 보자. 1 2 3 4 5 6 7 8 9 10 11 12 번호 제목 작성자 작성일 조회수 1 안녕하세요 ingoo 2021-12-21 10 2 안녕하세요 ingoo 2021-12-21 11 엘리먼트 안..