'웹프론트엔드' 태그의 글 목록

HTML 응용 - <table> , <input> , <form> 엘리먼트를 활용해 게시판 형식 만들기

2021.12.29

이번 포스팅에서는 html의 엘리먼트를 이용하여 기본적인 게시판 형태를 만들어 보려고 한다. 이전 포스팅에서 엘리먼트에 대해 다뤘었는데 짧게 복습해보자. html 코드에서 테이블을 만들 때는 엘리먼트 안에 엘리먼트와 엘리먼트를 사용한다. 테이블을 구성할 때는 몇개의 줄과 칸으로 구성할 것인지를 먼저 생각해야 한다. 이 때 줄을 생성하는 것이 엘리먼트이고 칸을 생성하는 것이 엘리먼트이다. 다시말하면, 엘리먼트의 개수만큼 row(행)를 생성하고 엘리먼트의 개수만큼 column(열)을 생성한다. 기본적인 게시판 모양의 코드는 아래와 같다. 게시판 로고 번호 제목 작성자 작성일 조회수 1 안녕하세요. web7722 2021-12-29 0 2 안녕하세요2. web7722 2021-12-29 2 글쓰기 엘리먼트 안..

CSS

CSS skills(1) - display, float, position

2021.12.22

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

HTML

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

2021.12.22

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

CSS

CSS란?

2021.12.21

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