개발하는 동그리

Container (사용할 수 있는 속성 값) display : flex; flex-direction : (default)row, row-reverse, column, column-reverse frex-wrap : (default)nowrap, wrap (reverse 사용가능) ---> 화면에 꽉 차면 다음줄로 넘기는 여부 flex-flow : column wrap; justify-content : flex-start, flex-end, flex-center, space-around, space-evenly, space-between Item (지정할 수 있는 속성 값) order : 1; --> item의 순서 변경 가능 flex-grow : (default) 0; flex-shrink : (def..

CSS 는 무엇인가? CSS (Cascading Style Sheets)의 약자로 문서에 디자인을 입힐 때 사용하는 스타일 시트 언어다. CSS 가 필요한 이유? HTML에서 디자인을 입히는 것보다 CSS를 따로 구현해서 관리한다는 점은 유지보수 관점에서도 유리하고 스타일만 모아두었기 때문에 웹페이지를 경량화 할 수 있다. Ctrl + Shift + C 를 누르면 화면에 구현된 코드위치를 찾아 볼 수 있다. 혹은 궁금한 부분에서 스크롤 오른쪽 클릭하여 검사! 혹은 F12 를 눌러서 개발자 도구를 확인 하면 구조를 파악하기 수월하다. CSS 용어 정리 font-size : 24px ( 절대 단위 : px, pt ) ( 상대 단위 : %, em, rem, ch, vw, vh 등 ) * 상대 단위인 rem 이..

내용 HTML CSS Javascript 주요 기능 web site 뼈대 구성 (Structure) html 스타일 구성 기능 구현 (상호 작용) HTML은 위에 보이는 코드처럼 Structure를 구성하는 단계이다. 주로 제목과 내용 그리고 구성을 짜게 된다. 해당 문서가 HTML 문서임을 알리는 지시어 문서 전체의 틀을 구성하는 시작태그 문서의 메타데이터를 선언 문서의 제목으로, 브라우저를 실행했을 때 탭에 보여짐 문서의 내용을 담는 곳 ~ 숫자가 작을수록 큰 제목으로 표시된다. ex) 크게할 수 있음. 블록 태그로, 한줄을 독점할 때 사용함. 인라인 태그로 블록속에 삽입되어 블록의 일부로 사용되며, 컨텐츠의 크기만큼 공간을 차지함. unordered list, ordered list, 리스트 내의 ..