위코드-TIL-6-HTML, CSS 정리

jin_sk·2020년 5월 30일

0

위코드

목록 보기

20/49

HTML, CSS 레플릿 정리

HTML	중요 키워드	개념 정리 필요	참고 링크
HTML	HyperText Markup Language tag attribute element attribute	HTML 이란 무엇이고 왜 생겨나게 됐을까? HTML은 무슨 일을 할까? HTML의 기본 구조는? tag(태그)는 무엇일까? element(요소)는 무엇일까? attribute(속성)은 무엇일까?	MDN HTML w3s tags w3s attribute
HTML Tags	<> (오프닝태그) </> (클로징태그) 기본 구조 태그 자주 사용 태그	태그와 요소란 무엇일까? html 기본 구조 태그엔 어떤 것이 있으며 각각 무슨 역할을 할까? 자주 쓰이는 html 태그는 어떤 것이 있을까? 클로징 태그가 존재하는 태그와 클로징 태그가 존재하지 않는 태그가 있는데 차이점이 무엇일까? <!DOCTYPE>, <html>, <head>, <body> 의 특성 <span>, <a>, <p>, <div> 의 특성	w3s tags MDN tags
HTML Attribute	태그별 속성 id, class 자주 사용하는 속성	속성은 어떤것이고 왜, 어떻게 사용하는가? 대표적인 속성은? 각 속성별 특성은? 태그의 종류에 따라 사용할 수 있는 속성은? 여러가지 속성을 추가할 수 있는 방법은? id 속성의 특성, 어떤 상황에 사용할까? class 속성의 특성, 어떤 상황에 사용할까?	MDN attribute w3s attribute
CSS	Cascading Style Sheets inline style style tag css file CSS selector	CSS는 무엇이며 어떤일을 할까? CSS 적용 : inline 스타일 방법과 장단점은? CSS 적용 : style태그 방법과 장단점은? CSS 적용 : css파일 방법과 장단점은은? CSS 작성 : tag 선택자(selector) 작성 방법과 적용 범위는? CSS 작성 : class 선택자(selector) 작성 방법과 적용 범위는? CSS 작성 : id 선택자(selector) 작성 방법과 적용 범위는?	MDN CSS w3s CSS
CSS font	글자 스타일 font-family font-size font-weight font-style color	브라우저에 폰트 스타일을 어떻게 적용하고, 백업 폰트는 어떻게 적용시킬까? 폰트의 크기를 어떻게 조절하며, 어떤 단위가 있을까? 글씨 두께를 숫자, 문자로 어떻게 조절할 수 있을까? 글씨 스타일을 어떻게 바꿀 수 있을까? 글씨 색깔을 hex, rgb, hsl 이용해 어떻게 변경할 수 있을까?	MDN font w3s font 색상확인 구글 폰트
CSS text	문구(문자열) 스타일 text-align text-indent	텍스트 left, center, right 정렬하는 방법은? css에서 들여쓰기 적용하는 방법은? 왜 css에서 들여쓰기 스타일을 적용해야 할까?	w3s text MDN text
CSS Margin, Padding	요소 여백 종류 margin padding box-sizing	요소의 여백을 어떻게 설정하고 계산하며 진행해야 할까? 박스 모델이란? margin이 무엇이며 어떻게 적용하는가? padding이 무엇이며 어떻게 적용하는가? box-sizing을 설정하지 않으면 어떤 일이 일어나는가?	MDN Box Model MDN margin,padding w3s margin,padding
CSS border	border border style 종류 테두리 분리하여 스타일	border style은 어떻게 적용시키는가? 밑줄을 왜 border-bottom으로 구현하는 것을 선호할까?	w3s border MDN border
CSS Inheritance, Grouping	상속(Inheritance) 그룹(Grouping)	CSS 상속이란?, 상속이 되면 좋은점, 하는 이유는? CSS 그룹니란?, 그룹화 하면 좋은점, 하는 이유는?	MDN CSS상속 w3s CSS그룹
CSS selector	CSS selector CSS selector 우선순위	tag, class, id의 selector 표현방법은? tag, class, id의 selector는 어떻게 결합해서 쓸 수 있을까? selector가 서로 붙어있지 않고 스페이스로 띄워져 있는 경우에 최종적으로 적용되는 selector은 무엇일까? 왜 띄워서 사용하는가? CSS selector의 우선순위는? 우선순위를 어떻게 잘 활용할 수 있을까?	MDN Selectors w3s Selectors
HTML, CSS 이미지	<img> src, alt background-image	html <img>로 이미지 삽입 사용 용도, 장단점은? <img> 속성인 alr, src 사용방법과 용도는? <img> css 어떤 방법으로 수정하는게 좋을까? css background-image로 이미지 삽입 용도, 장단점은? css img 스타일 적용방법은 어떤것이 있을까?	MDN img w3s CSS img
CSS display	block inline inline-block none margin auto float flex	block 요소는 어떤 기능을 하며 해당하는 html 태그는? inline 요소는 어떤 기능을 하며 해당하는 html 태그는? css display inline-block 속성은 html태그의 inline요소를 어떻게 바꾸어주는가? css display none 속성은 어떻게 쓰이며, 왜 자주쓰일까? css float 속성은? float 속성을 쓸 때 왜 clera 속성을 같이 써야할까? margin auto 사용법과 어떤 display속성에서 사용하는 것이 좋을까? css flex 속성은? 어떤 점이 편하게 쓰일까?	MDN display MDN float flex
HTML, CSS list	<ol>, <ul> <li> list style 적용하기	<ol>, <ul> 차이점은? 리스트 css에서 어떻게 수정할까? list-style에는 어떤 것이 있을까? <li>의 여백 margin, padding 둘 중 어떤 속성을 써야하고 조정 방법은? <li>의 css selector 표기방법은?	w3s list style
HTML, CSS table	<table>, <thead>, <tbody> <tr>, <th>, <td> conspan, rowspan	<table>의 구조, 구성 요소, 사용 방법은? <table>의 속성인 rowspan, colspan 사용 방법은? CSS에서 border, 배경색등 속성 적용하는 방법은?	MDN table w3x table
HTML, CSS input, textarea	<input> type : text, password, number, placeholder, value <textarea> <button> hover	<input> 의 사용방법, 용도, 각각의 타입은? <textarea> 의 사용방법, 용도, 미리 값을 세팅하고 싶을 때는? <button>의 사용방법, 용도는? <input>, <textarea>, <button> inline이라 디자인을 변경하고 싶을때 어떻게 설정? <input>, <textarea> 스타일을 변경하고 싶을때는? placeholder, type 스타일을 변경하고 싶을때 selector에 표현하는 방법은? <button> 스타일 중 hover을 이용해 cursor 모양을 변경하는 방법은? hover는 어떤 효과를 줄 수 있을까?	MDN input MDN button MDN textarea MDN hover
CSS position	static relative absolute fixed	position의 static, relative, absolute, fixed 정확한 사용법과 각각의 차이는?	MDN position w3s position
CSS layout	layout 짜기 시맨틱 태그 : <div>, <nav>, <header>, <section>, <article>, <footer>, <aside> 태그	레이아웃 어떻게 배치하는 것이 좋을까? 레이아웃 설계는 경험이 답 어떤 영역 구분 태그들이 있을까?	w3s layout, 시맨틱 태그 CSS layout layout box-model
CSS media query	@media only screen and (max-width : 480px) or min mediaQuery.scss box.scss	medea query란 무엇이며 어떻게 적용하는가? scss에서 관리하는 방법은?	MDN media query MDN media query

이전 포스트

위코드-TIL-5 (JS-arrow function)

다음 포스트

위코드-TIL-7-JS 위치, DOM

0개의 댓글