프론트/HTML|CSS 7

[HTML/CSS] 줄 맞춤 ( 긴 글 칸에 맞추기 _ 자동 엔터)

input 태그 안에 값을 넣을 때 아주 긴~~ 문장을 입력할 때가 있다. 이때 스타일을 적용하지 않으면 한줄로 입력이 되기 때문에 주의가 필요하다. 방법은 아래와 같다. white-space: pre-wrap 적용 전 white-space: pre-wrap 적용 후 상세보기 번호 ${vo.no } 작성일 ${vo.dbday } 이름 ${vo.name } 조회수 ${vo.hit } 제목 ${vo.subject } ${vo.content } 수정 삭제 목록

프론트/HTML|CSS 2022.09.01

[CSS] 선택자의 종류와 사용법

HTML과 CSS를 구분할 때 CSS = 화면 디자인 이렇게 단순하게 생각해도 좋다. 화면 디자인을 하기 앞서 선택자를 반드시 알아야 한다. 그렇다면 선택자는 무엇일까? 선택자 CSS는 외부 CSS, 내부 CSS, 인라인 CSS로 사용된다. 외부 CSS와 내부 CSS는 태그 하나 하나에 직접 디자인을 적용시키는 것이 아니라 전체 태그 중 다수 또는 소수의 태그에 디자인을 적용시킨다. 만약 한 페이지 안에 태그가 10,000개가 존재한다고 생각해보자. 만개의 태그 중 특정 테이블 안에 존재하는 태그의 디자인만 변경하고 싶다. 그럼 어떻게 찾을 수 있을까? 이때 필요한 것이 선택자이다. 선택자는 태그만이 갖는 특성을 이용해서 원하는 태그를 찾을 수 있도록 '구분'한다. * 전체 선택자 페이지 내부에 있는 모..

프론트/HTML|CSS 2022.07.12

[CSS] CSS 정의와 종류 (외부 CSS, 내부 CSS, 인라인 CSS)

HTML은 태그를 이용해서 값을 출력한다면, CSS는 주로 태그를 꾸며주는 기능을 한다. CSS를 한마디로 표현하자면 '화면 디자인'이라고 할 수 있겠다. HTML의 내용과 상관없이 디자인을 바꿀 수 있기 때문에 CSS를 누가 디자인 하느냐에 따라 화면 디자인이 달라진다. CSS는 3가지로 구별할 수 있다. 외부 CSS 내부 CSS 인라인 CSS 각각의 특징에 대해서 알아보자. 1. 외부 CSS 모든 페이지에 적용시길 때 css파일을 만들어 제작해두면 좋다. css파일을 하나 만들어 두고 각 페이지마다 불러오면 공통적인 화면 디자인이 가능하다. 확장자는 .css 이다. 위의 사진처럼 CSS 파일을 생성하면 필요할 때마다 어느곳에든 사용할 수 있다. 2. 내부 CSS 한 개의 파일 내부에서 설정된다. 3...

프론트/HTML|CSS 2022.07.07

[HTML/CSS] 박스 속성 margin과 padding 총정리

화면을 만들어 나갈 때 모든 요소는 '박스'라는 사각 영역을 생성하면서 시작된다. 박스를 구성하는 요소는 다음과 같다. * margin 속성 * border 속성 * padding 속성 * width 속성 * height 속성 먼저 그림으로 확인해보자. Margin 속성 Margin 은 브라우저와 태그 사이의 간격을 말한다. 가장 바깥쪽 여백이라고 생각하면 이해가 빠를 것이다. 브라우저에 글씨가 너무 가까이 붙어있다면, margin 속성을 주어서 공간을 띄울 수 있다. margin - top ( 위 ) > margin - right ( 오른쪽 ) > margin - bottom ( 아래 ) > margin-left ( 왼쪽 ) 위와 같은 시계 방향 순서로 값을 지정할 수 있다. margin은 4개의 방향..

프론트/HTML|CSS 2022.07.06

[HTML] 태그 속성과 태그 종류 < >

HTML 문법에서 생명은 태그 사용이다. 모든 명령는 태그를 이용하기 때문에 태그 사용법을 모르면서 HTML을 안다고 할 수 없다. 태그의 속성 1.여는 태그와 닫는 태그는 쌍으로 만들어 진다. 여는 태그 닫는태그 독립 태그(Empty) _단독으로 사용 가능하다. 2. 태그 속성은 두가지이다. block 속성 : 다음줄에 출력된다. 세로출력 inline 속성 : 옆으로 출력된다. 가로출력 ( enter없이 ) 태그의 종류 1. 문자관련 태그 html에서는 무조건 한줄 출력이다. 문단을 나누기 위해선 등을 이용해야함 : 제목을 설정 bold(굵은글씨) & br(다음 줄) ~~ 숫자가 커질수록 글자의 크기는 작아진다. HTML5 H1:태그는 소문자로만 사용 HTML5 H1:태그는 소문자로만 사용 HTML5 ..

프론트/HTML|CSS 2022.07.05

[HTML] 브라우저 html 이클립스 작성법 / 웹 환경 이해하기

나는 자바기반 웹 프로그래밍을 배우고 있다 보니 자바 편집로 사용했던 이클립스로 HTML를 다루게 되었다. 자바 번역기 톰켓을 통해서 웹서버와 통신이 가능하게 해준다. (WAS - 와스) 지금부터 HTML에 대해 알아보도록하자. HyperText MarkUP Language HTML은 브라우저에서 실행되는 언어이다. HTML 은 마크업 언어의 일종이다. 문법을 알기 위해서는 태그와 속성을 알아야 한다. HTML은 고정적이기 때문에 태그가 지정되어 있다. 이미 정해져있는 요소가 많기 때문에 배우기 어려운 언어는 아니라고 할 수 있다. 반면 XML은 사용자 정의로 구성되는 가변형 언어이다. HTML 은 정적 파일이기 떄문에 움직임이 없다 떄문에 HTML에서 끝나지 않고 CSS와 JavaScr..

프론트/HTML|CSS 2022.07.04