프론트엔드(15)
-
CSS 핵심 익히기
1. CSS 기본 문법 보통 웹 개발을 할 때 HTML 태그로 요소들을 구현하고 CSS로 디자인을 입히고 배치를 도와준다. 선택자 { 속성1: 값; 속성2: 값; } 선택자(Selector) -> 스타일을 적용할 대상 (태그, id, class 등을 선택) p { color: orange; } /* 태그를 id로 했을 때 */ #title { color: blue; } /* 태그를 class로 했을 때 */ .item { color: red; } 태그를 선택자로 하면 모든 태그에 스타일이 적용된다. id는 딱 한 요소에만 적용된다. class는 class가 적용된 모든 요소에게 적용된다. 상품리스트에서 상품의 디자인이 다 동일한 것은 class를 부여해줬기 때문이다. 선택자 조합 ->선택자 여럿을 ,로 ..
2021.01.29 -
HTML 빠르게 핵심 익히기
1. HTML 태그 기본 문법 웹의 본질은 정보를 시각적으로 보여주는 것이다. 이때 HTML태그는 정보를 보여주는 역할을 한다. 이미지, 텍스트, 비디오, 입력창 등의 개별 정보는 전부 HTML로부터 만들어진다고 보면 된다. 위 정보들을 HTML 언어로 표시하기 위해서는 태그/속성/콘텐츠를 이해해야 한다. 1. 기본 형식 : 콘텐츠 Hello 2. 속성이 있으면 콘텐츠 Naver 3. 태그 안에 또 태그를 넣는다면 Hello everyone! *HTML에서 주석을 사용하려면 2. HTML로 웹 기본 구성 짜기 html 태그가 가장 밖에서 사용되며 그 안에 head, body 태그가 사용된다. head태그는 콘텐츠를 보여주는 것이외의 모든 설정 태그를 넣는다. body태그는 실제로 화면을 구성하는 태그를 ..
2021.01.27 -
CSS 뽀개기
CSS는 html 문서에 디자인적인 요소를 추가한 것. 첫번째 예 CSS 1. 아래 : 기존 html 코드를 CSS문법으로 바꿔보기 HTML CSS JavaScript :중복된 코드 발생 -> CSS 문법으로 바꾼 결과 :a는 selector 라는 의미 { }는 declaration의 의미 color는 property의 의미 red는 property의 value ->html은 하나하나 바꿔야해서 숫자가 많아지면..? (wow) ->반면 css는 style 하나로 바뀔 수 있음. 하나가 바뀌면 모든 것이 바뀐다! "중복의 제거" 2. style 속성쓰기 CSS CSS 글자 크기는 어떻게? -> h1 { font-size: 60px; } 글자 중간 정렬까지! h1 { font-size: 60px; text-..
2020.10.03