front-end
-
CSS 기본 구조 및 선택자front-end/HTMI CSS 2023. 6. 5. 12:51
1. CSS 란? - Cascading Style Sheet HTML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어 HTML 정보 CSS 디자인 2. CSS 기본 문법 Selector(선택자), Value(속성값), Property(스타일속성) - 작성 방법 선택자 { 선언 선언 } * 선언 방법 속성 : 값; h1{ color: indianred; background-color: silver; } - font 속성 글자의 폰트를 정의하는 속성 font-family 글꼴 font-size 글자크기 font-weight 글자두께 font-style 글자 스타일 h2{ font-family : '나눔고딕', '굴림','돋움'; /* 글꼴의 집합, 최대한 비슷한 폰트 사용하기 */ font-size: 5..
-
HTML 입력 양식 태그 & 이미지 클릭으로 링크 이동front-end/HTMI CSS 2023. 6. 3. 13:46
- 이미지 클릭으로 링크 이동 ex) 이미지 클릭하면 네이버로 이동 1. 입력양식 태그 - form 태그 사용자로부터 데이터를 입력받아서 전송할 때 사용 method : 데이터가 서버로 제출될 때 사용 action : 데이터를 전송할 위치 - input 태그 입력을 받는 태그 * name속성은 필수 name은 입력받은 데이터를 구분하는 역할 입력받은 text가 id인지 name인지 구분 placeholder : 미리보기 기능 value : 기본값 지정 ID를 입력하세요 : 이름을 입력하세요 : 비밀번호 입력 : - select 태그 구글 네이버 카카오 * option태그가 아닌 select태그에 name을 지정하는 이유 사용자는 option중에서 최종 1개만 선택을 하기 때문에, 1개 데이터만 전송 op..
-
HTML 기본 태그 & 코드 정렬 커맨드front-end/HTMI CSS 2023. 6. 2. 12:46
- 코드 정렬 커맨드 Windows : Shift + Alt + F MAC : Shift + Option + F Linux : Ctrl + Shift + I 1. HTML의 기본태그 글 본문 글 제목 링크 버튼 리스트 리스트 태그을 열면 태그를 닫아야 된다. but 닫지 않아도 되는 태그도 존재를 합니다. 대표적으로 가 있습니다. 특정 태그는 안에 href=" ", src=" " 이런 속성을 집어넣어서 추가 정보를 입력이 가능합니다. href는 클릭시 이동할 링크 기입 가능하고, src는 파일 경로를 기입 가능합니다. 용도에 맞는 태그를 사용를 해야 됩니다. HTML은 마크업언어기 때문에 자료의 구조를 쉽게 파악 하는것이 목적입니다. 용도에 맞는 태그를 사용하면 더욱 '웹표준'에 맞게 됩니다. 1.1 다..