본문 바로가기

프론트엔드 학습

 (14)
1. CSS 적용하는 3가지 방법. 1. 인라인 스타일 (inline style) HTML 태그마다 style 속성으로 CSS 코드를 넣어주는 방식. 여러 요소들에 공통 속성을 재사용하여 부여할 수 없고, HTML 코드와 CSS 코드가 분리되지 않기 때문에 특별한 경우를 제외하고는 사용되지 않는다. 2. 내부 스타일 시트 (internal style sheet) head 태그 안에 style 태그를 생성해두고, 그 안에 CSS 코드를 작성하는 방식. HTML과 CSS 전체 코드량이 많지 않고, CSS가 해당 HTML 문서에서만 적용될 경우, 유용하다. 3. 링킹 스타일 시트 (linking style sheet) 외부의 CSS 파일을 HTML 문서에 연결하는 것. HTML과 CSS의 코드가 분리되고 CSS 코드를 여러 HTML 파일에서 공..
12. span, div, tr, td 태그 1. , 사실상 아무런 기능이 없는 공간 주머니. 주머니의 모양과 차지하는 공간의 차이. 태그 설명 인라인 요소로 주로 텍스트나 다른 인라인 요소 내에서 일부분을 감싸는데 사용. span은 자체적으로는 아무런 시각적 효과나 구조를 갖지 않지만, CSS와 함께 사용해 스타일링이나 자바스크립트와의 상호작용을 위한 특정 부분을 지정할 때 사용. 블록 수준 요소로, 주로 웹페이지의 큰 구획을 만들거나 다른 블록 또는 인라인 요소들을 그룹화하는데 사용. div 태그 자체로는 효과가 없지만 CSS를 사용해 레이아웃이나 스타일링을 적용할 수 있다. Table data의 약자로, HTML 테이블 내에서 셀을 의미. td는 tr (테이블 행) 내에 위치해야 한다. 1. span 이것은 빨간색 텍스트를 갖는 문장입니다. ..
11. pre, iframe, kbd, dfn, small 태그 1. pre 태그 태그 속성 설명 작성된 텍스트의 스페이스, 탭, 엔터 등 모든 공백 요소들이 입력한 텍스트대로 웹 페이지에 출력된다. [VS Code] pre 태그 pre 태그에 텍스트를 작성하면 스페이스, 탭, 엔터 등 모든 공백 요소들이 이와 같이 화면에 그대로 적용됩니다. 때문에 pre 태그는 아래의 아스키 아트(Ascii art)들처럼 공백요소들을 적극 활용해야 하는 경우 유용하게 사용될 수 있습니다. 하지만 스크린 리더는 pre 태그의 내용을 읽지 않으므로 접근성을 위해 추가적인 조치가 필요하죠. 이 부분은 HTML 심화편에서 다루겠습니다. ,d888a ,d88888888888ba. ,88"I) d a88']8i a88".8"8) `"8888:88 " _a8' .d8P' PP .d8P'.8 d..
10. textarea, option선택지, meter수치 1. textarea 태그 속성들 태그 속성 설명 cols 글자수 단위의 넓이 rows 표시되는 줄 수 초과하면 스크롤 형태로 바뀜 placeholder 배경으로 출력되는 문구 readonly 변경 불가. 서버 전송 O disabled 변경 불가. 서버 전송 X. required 반드시 입력해야하는 란 value 속성이 아닌 사이에 입력 예시 #1. 게시글 작성 [VS Code] 게시글 제목 게시글 내용 저장하기 지우기 [웹 페이지 출력] 2. 옵션들을 사용하는 태그 태그 속성 설명 multiple 다중 선택 가능. 드랍다운 대신 상자로 표시 label 제목 value 서버에 전송할 값 selected 선택됨 (checkbox, radio의 checked 같이) value 실제로 전송될 값 id 해당 i..
9. form, fieldset, label, input 입력 [사용자 입력 태그] 태그 설명 속성 정보를 제출하기 위한 태그들을 포함 autocomplete 속성 : 인풋칸의 자동완성 여부 (기본:on) 최근 검색 기록 나오느냐, 아니냐 결정 button type : submit일 경우 서버 파일로 데이터 전달됨. 태그 안 input 요소와 label들을 그룹화 하기 disabled 속성 : 포함된 입력요소 비활성화
8. HTML - 다른 곳으로 링크 태그 속성들 target 속성값 설명 비고 _self a+limit + Tab 가능 해당 브라우저에서 열기 _blank 새창에서 링크 열기 _parent _top p#target_${id: target_$}*N 입력된 Id로 스크롤 하여 바로가기 글 메일 바로 보내기 글 전화 바로 걸기 [VS Code] 구글로 가기 [웹 브라우저 출력] _self : 같은 브라우저에서 링크 열기 _blank : 새로운 브라우저에서 링크 열기 [Image에 링크 넣기] #1. a + link + Tab #2. 안에서 tartget + _blank + Tab #3. 사이에서 img + Tab [웹 브라우저 출력] : 연락처에 대한 정보 [VS Code] han2041126@gmail.com 010-1234-1234 [웹 브..
7. HTML - 표(테이블) 사용하기 태그 설명 비고 테이블 표 설명 or 제목 선택사항 테이블의 헤더 부분 앞에 와야함 테이블의 본문 본 내용을 담음 테이블의 제일 하단 뒤에 와야함, 제일 하단 가로줄을 나타냄 안에 가 들어감 caption+(thead>tr>th*8)+(tbody>tr*7>th+td*7) thead>tr>th*8 : 가로행(tr)에 헤더 8개 (요일, 월, 화, 수, 목, 금, 토, 일) tbody>tr*7(1-7교시)>th(헤더)+td(세로칸)*7 [VS Code] [웹 페이지 결과 화면] 표 내용 채우기 #1. : 표의 각 열의 최상단을 나타냄 -> 요일 일주일 공부 계획표 * 월요일 화요일 수요일 목요일 금요일 토요일 일요일 #2. : 표의 내용에 해당. 가로행 가로행의 제일 좌측을 나타냄 -> 교시 해당하는 가로 ..
6. HTML - 이미지 넣기 [이미지 태그의 속성] 속성 설명 비고 이미지 태그 img[] + Tab 가능 이미지 url + 아래 속성 입력 가능 src 이미지 원본파일 경로 절대 경로 또는 상대 경로 src 절대 경로 src="이미지 url 입력" src 상대 경로 src="./ 해당 폴더에 있는 이미지 파일 선택" alt 대체 텍스트, src 이미지 설명 이미지 파일 손상시 이를 설명하는 텍스트 원본파일 손상시 이를 설명하는 텍스트 title 툴팁 마우스로 이미지에 가져다 댔을 때 설명 alt를 넣지않거나, alt 내용과 중복은 안됨 width 너비 픽셀 단위의 정수 height 높이 픽셀 단위의 정수 #1. img[] + Tab : 자동 생성됨 #2. src 절대 경로 src="이미지 url" #3. src 상대 경로 src=..

티스토리툴바