▼홈페이지 만들기 ▷첫화면은 반드시 'index.html' 로 저장 ▷공통으로 사용하는 css는 따로 만들기 ▼이미지 부분 곡선 ▷border-radius:상단 왼쪽, 상단 오른쪽, 하단 오른쪽, 하단 왼쪽; ㄴex) img{border-radius:88.5px 88.5px 0px 0px;} ▼영상 삽입 ▷ ▷자동 플레이 : autoplay ▷반복재생 : loop ▷컨트롤러 표시 : controls ▷크기지정 : width, height ▷대체문구 : fallback text ▷음소거 : muted ▷썸네일 : poster ㄴex) Video not found

▼한줄에 여러 박스를 나열하고 싶을 때 ▷자식을 한줄에 여러개를 배치한다면 - 부모에게 display:flex; 입력 - justify-content:space-between (양쪽 끝을 기준으로 정렬, 맨끝에 위치) - justify-content:space-around (양쪽 끝을 기준으로 정렬, 양끝에 간격이 있음) - justify-content:center (가운데 정렬) ▼자식 줄바꿈 ▷자식의 너비가 부모의 너비보다 커질시 자동으로 줄을 바꾸어 배치한다 ▷부모에게 flex-wrap:wrap ㄴex) ul{ display:flex; justify:center; flex-wrap:wrap; } ▼정렬 기준 방향 설정 ▷flex-direction -row (기본값) : 왼쪽에서 오른쪽으로 수평 배치..

▼선택자 ▷태그 -해당 태그를 입력하여 스타일을 줌 -태그를 여러번 사용하면 중복사용이 될 수 있어 선택자(class 나 id)를 사용 ▷클래스 (class) -태그는 같은데 스타일을 다르게 주고 싶을 때 -반복할 수 있음 -점(.) 으로 표시함 ▷아이디 (id) -레이아웃 설정할 때 사용 (크게 묶어주고 싶을 때) -반복하지 않음 (가능은 하지만 실무에서 하지 않음) -샵(#) 으로 표시함 ㄴex) 에디토리얼 View All ▼선택자 위치 지정 -선택자가 태그, 클래스, 아이디, 몇번째 자리에 있는지로 선택자를 지정할 수 있음 ▷first/last child{} ㄴex) li:first-child{ } -> li의 첫번째 자리에 위치한 선택자 li:last-child{ } -> li의 마지막 자리에 위..

▼주석 (설명글) -태그에 대한 설명을 남기고 싶을 때 적용이 되지 않는 태그로 설명을 써놓음 -협업시 코드에대한 이해를 도와 작업이 수월하게 진행되도록 도움 ▷html 주석 ㄴ ▷css ㄴ /*설명*/ ▼글꼴 ㄴ다른 컴퓨터에서도 폰트가 달라지지 않기 위해 웹에 저장되어 있는 폰트를 사용 ㄴ폰트 종류가 많으면 로딩이 느려지기 때문에 최대 2개정도만 사용 ▷구글 웹폰트 (링크로 가져오기) -구글에서 '구글 웹폰트' 검색 -원하는 폰트 선택 -우측 상단 Selected family 키기 -Remove Regular 400 클릭 ㄴlink에서 폰트 이름 들어가 있는 태그 복사 style에 붙여넣기 ㄴCSS에서 'font-famliy ~' 전부 복사 body에 붙여넣기 ▷웹폰트 (폰트 페이스로 가져오기) -구글..

▼목록 만들기 ▷순차 목록 (순서가 있는 목록 ex. 123. 가나다) - ㄴex) 순서가 있는 목록1 순서가 있는 목록2 순서가 있는 목록3 ▽비순차 목록 (순서가 없는 목록 ex. -, ※, ●) - -한줄에 여러개의 요소를 나타내려고 하는데 스타일이 비슷할 때 사용함 ㄴex) 순서가 없는 목록1 순서가 없는 목록2 순서가 없는 목록3 ○앞에 표시를 지울 수 있음 ㄴex) ○목록 list 사용법 >예전방식 float: left/right (어려워서 태그가 업데이트 됐으나 여전히 많이 사용중) -공중에 띄워서 left/right 로 보내라 -center는 없음 -left/ right 사용시 순서대로 적용 (left: 1234 / right: 4321) >최신방식 display: flex ○float시 ..

------------------------------------------------------------ ▼인라인 스타일 ▷태그에 스타일을 넣는 것 ㄴex) 제목입니다 ▼내부스타일 ▷ ▼외부 스타일 ▷스타일을 저장(~~~.css)을 하고 html 문서에 css를 연결시킴 ㄴex) ▽외부스타일을 하게 되면 공통된 스타일은 한번만 만든 후 링크설정으로 여러번 사용가능 ▷ css가 있는 경로를 찾으려면 html문서를 기준으로 ~~~.css가 있는 곳을 찾으면 됨 ▼스타일 정의 ▽가로 가운데 정렬 ▷글자, 이미지 가운데 정렬 : text-align:center; ▷img{text-align:center} 가운데 정렬이 안됨 ▷이미지를 감싼 부모(블록요소)한테 가운데정렬을 해야함 ▷박스를 가운데 정렬 : ma..