프론트엔드 (7) 썸네일형 리스트형 [CSS] 0. 기초 학습 내용 CSS 스타일 3가지: 제작자, 사용자, 브라우저 ex) 제작자: 직접 지정한 css / 브라우저: a태그 시에 자동으로 파란색 + underline 되는 것. 우선순위: 사용자(! important) > 제작자(! important) > 제작자 > 사용자 > 브라우저 코드 HTML 제목 안제목 Naver Test Document 음 오 아 예 오에 오예 오예 CSS /* * { color: skyblue !important; } */ /* external style */ #exst { padding: 30px; background-color: black; color: gray; } [HTML] head 태그 학습 내용 head 태그: 정보 및 웹의 설정을 담는 공간 Open Graph(og 메타태그): SNS(카카오톡, 블로그, 페이스북 등) 공유에 최적화된 메타 데이터를 설정하는 태그. 보통 미리보기(요약) 부분을 보여주는 역할을 한다. 코드 Reference 강의 오픈 그래프 [HTML] Form 태그 학습 내용 form: 사용자의 입력을 받는 공간 아래 실습에서 사용하지는 않았지만 readonly, disabled라는 속성들도 있다. readonly는 값을 수정할 수 없게 하고, disabled는 값을 수정할 수 없으면서 form을 통해 넘어가지도 않게 한다. Id, name, class의 차이는 해당 블로그의 설명을 참고하자. input type='submit'과 button type='submit'의 기능은 동일하지만, button이 디자인 요소를 넣을 때 더 적합하다. 코드 필수입력정보 이름 아이디 비밀번호 이메일주소 핸드폰번호 선택입력정보 생년월일 나이 졸업월 블로그주소 열정 이력서 수강 목록: 컴프1 컴프2 컴과사 학년: 1학년 2학년 3학년 4학년 이상 한마디 새우깡 좋아하는 꿀벌 토익점수.. [HTML] 이미지 & 멀티미디어 태그 학습 내용 img, audio, video, a 태그를 이용하여 다양한 콘텐츠 제공 가능 alt img 태그 사용 시, alt를 사용하여 이미지 로드 실패 시에 나타낼 문구를 표시 source audio, video 태그의 내부에 source 태그를 사용하여 한 개 이상의 소스 지정 가능. 여러 개를 지정하면 브라우저가 자동으로 소스 선택 a a태그를 사용하여 웹페이지 이동, 해당 웹의 특정 element로 이동, 이메일 보내기 등 여러 가지 기능을 포함한다. 코드 디그다의 모든 것 디그다보다 귀여운 영상보기 후원문의 Reference 강의 강의2 [HTML] 영역 태그 학습 내용 영역 태그 영역을 분할하거나 컨텐츠를 담는 컨테이너의 역할을 한다. inline level element, block level element 모든 영역 태그는 inline level element인지, block level element인지로 구분된다. inline: 컨텐츠의 크기만큼만 공간 할당. (그래서 가로로 나열됨) block: 부모 요소의 전체 가로 크기만큼 공간 할당. (그래서 세로로 나열됨) 대표적으로 이 inline, 가 block에 해당한다. css로 설정할 때, inline 요소는 공간의 width, height 등을 지정할 수 없고, block은 가능하다. 참고로 css의 display를 통해서도 inline, block을 설정해줄 수 있다. css를 통해 backgrou.. [HTML] 태그 메모 , 사용은 지양하기 inline style 사용하지 않기 여러 개 사용하지 않기 semantic 태그 사용하기 (큰 틀을 잡을 때 div말고 header, footer 등을 사용하기) 코드 큰제목 작은제목 문단 이탤릭 이탤릭 강조 볼드 볼드 강조 금상 은상 동상 상상 뮤티즌상 엄원상 동상 잘하면 받는다. 은상 더 잘하면 받는다. 금상 그것보다 더 잘하면 받는다. 졸업프로젝트팀 명단 팀명 이름 학번 비고 탁트리오 강지훈 2019XXXXX 버스를 잘탐 박형기 2019OOOOO 월 300받고 일함 황영탁 2019_____ 히트곡 다수 보유 Reference 강의 강의2 강의3 웹표준 Semantic tag [HTML] VSCode Emmet 코드 Hello World list1 list2 list3 list4 Reference 강의 이전 1 다음
