본문 바로가기

Front-End64

[CSS] CSS 특징과 기본 개념, CSS 스타일 지정 방법 CSS(Cascading Style Sheet) - HTML이 웹 페이지의 "뼈대"라고 한다면 CSS는 "살" 이라고 할 수 있음 - 즉, HTML이 웹 페이지의 정보를 표현한다면, CSS는 HTML을 좀 더 보기 좋게 디자인 하는 역할을 함 CSS 특징 HTML 문서에 스타일(디자인)을 적용하는 언어 CSS 사용 방법 : 인라인 방식(태그에 직접 적용), head 영역, 외부 파일(*.css) CSS 형식 : 선택자 { 속성 : 값; } 선택자 : body에서 선언한 태그 하위태그 지정 : 상위태그 하위태그 { 속성 : 값; } CSS 스타일 지정 방법 link 방식 -link : 현재 문서와 외부 리소스(*.css) 파일과의 연결을 의미 -rel : "stylesheet" : 태그로 연결하는 파일이 .. 2021. 10. 27.
[HTML] 시맨틱 태그 시맨틱 태그 - 집을 지을 때에는 우선 방은 몇 개를 만들지, 거실, 주방, 화장실은 어디에 배치를 할 지 등 전체적인 구조를 정해야 함. 이처럼 웹 페이지를 만들 때도 HTML5의 시멘틱 태그를 이용하여 영역을 나누어서 기본 구조를 정하게 됨. 이렇게 하면 웹 문서의 머릿말과 본문인 콘텐츠, 그리고 꼬릿말의 영역이 구분이 되어 웹 브라우저가 웹 문서를 효율적으로 읽을 수 있게 됨. - 또한 개발자들도 효율적으로 구분을 할 수 있어서 유지 보수에도 많은 도움이 됨 - 시멘틱(semantic) : 의미론적인의 뜻을 가지고 있음. 즉, 의미가 있는 태그라는 뜻 - HTML5에 도입된 시멘틱 태그는 개발자와 웹 브라우저에게 의미가 있는 태그를 제공함 시멘틱 태그의 태그 종류 1. header 태그 - 웹 브라.. 2021. 10. 27.
[HTML] fieldset 태그, legend 태그 fieldset 태그 HTML 태그들을 하나의 박스로 묶어주는 태그legend 태그 fieldset 태그에 제목을 부여하는 태그 필수 입력 사항 이 름 : 아이디 : 이메일 : 연락처 : 선택 입력 사항 운동 여행 독서 잠자기 숨쉬기 남 여 2021. 10. 27.
[HTML] form태그_required 속성 여러분의 이메일 주소를 입력하세요..... 이메일 란을 작성하지 않고 전송 버튼을 누르면 위와 같이 에러창이 나타난다. 2021. 10. 27.
[HTML] number 태그 수량을 선택하세요 2021. 10. 27.
[HTML] date 태그, time 태그, week 태그 날짜를 선택하세요 달력 선택 시 해당 날짜가 선택된 채로 달력 화면이 나온다. 해당 시간이 선택된 채로 시간 화면이 나온다. 선택 완료! week 태그 오늘은 몇 번째 주인가요 선택하면 아래와 같이 생성된다. 2021. 10. 26.