Coding Note

Flexbox flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능 태그에 적용하는 flexbox 기능 - display : flex; or inline-flex; - flex-direction : 방향 설정 - flex basis: auto; 부모 영역을 기준으로 잡아 아이템 공간을 차지한다. - flex-wrap : 항목이 여러 줄에 나열되도록 - flex flow(flex-direction + flex-wrap) (ex. flex-flow: row wrap;) - justify-content 행(가로)을 정렬하는 방식 - align content flex 컨테이너에 지정하는 속성이며, 교차축을 따라 flex 항목 열(세로)을 정렬하는 방식을 지정한다. 태그에 적용하는 flexbox..

시맨틱 태그 웹 페이지를 부분 별로 공간을 나눈 태그! - header : 웹 페이지 상단 - nav : 많이 사용하는 메뉴, 목차 - section : 본문, 내부에 제목 태그 h1 ~h6 사용 권장 - article : 정보전달성 내용 (ex. 기사) - aside : 광고, 본문과 상관없는 영역 - footer : 웹 페이지 하단 Q. , 차이점은? 세션은 부위 별로 영역을 나눌때 사용한다. 메인태그는 웹 페이지 영역을 포괄한다. 요즘 추세는 spa로 하기 때문에 굳이 비교하지말고 Section 태그 사용하자! HTML 기본 코드 정리 태그는 마감 태그를 필수로 작성해야 하며 자식 태그를 가진다. 태그, 문자 인코딩 및 문서 키워드, 요약 정보문서 정보 등! 태그, 외부 문서 연결, css, 폰트 ..

웹 사이트는 여러 개의 HTML 페이지를 가지고 상호 연결하는 방식으로 구성된다! 그러므로 피드에서 소개할 태그는 매우 중요한 개념이다! 태그 속성 속성 이동할 HTML 페이지의 URL 혹은 HTML 페이지 내 앵커 이름 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정 링크가 클릭되면 href에 지정된 파일 다운로드됨 속성 target 속성에서 사용할 수 있는 값은 _blank, _self, _parent, _top 이 있다. 링크 만들기 포털사이트 Google(새 윈도우, _blank) Google(현재 윈도우, _self) Google(부모 윈도우, _parent) Google(브라우저 윈도우, _top) 속성 download 속성은 모든 파일을 다운로드할 수 있는 링크를 만든다. Downl..

꼭 알아야 하는 HTML 태그 속성 함께 알아보자! 표를 구성하는 태그 속성 개념 태그 속성 표 전체를 담는 컨테이너 표 제목 헤드 셀 그룹 바디(데이터) 셀 그룹 바닥 셀 그룹 행 단위 여러 개의 , 포함 제목(헤드) 셀 데이터(바디) 셀 표 구현 코드 기본 구조를 가진 표 성적표 이름 국어 수학 합 280 260 가 100 80 나 80 80 다 100 100 구현 웹 페이지 포인트! 은 전에 나오는 것이 좋음. 페이지가 프린트될 때 에 들어 있는 내용이 길어 여러 페이지에 겹쳐지게 될 때, 헤드와 바닥을 각 페이지 위아래에 출력하기 위함.

HTML에서 리스트를 빼먹을 순 없지! 리스트에 대해 함께 알아보자!! 리스트는 , , 이 있다. 자세히 알아보자! : 의 약자로 순서 있는 리스트를 의미한다. : 의 약자로 순서 없는 리스트를 의미한다. : 의 약자로 정의 리스트를 의미한다. 위 각 리스트는 태그를 사용하며 닫힌 태그는 생략할 수 있다. 각 태그 예시 1) , 코드 아이템1 아이템2 type 적용하기 아이템1 아이템2 아이템3 아이템1 아이템2 아이템3 - , 코드 구현 웹 페이지 1-1) , 중첩 리스트 중첩 리스트 좋아하는 음식 떡볶이 카레 비빔국수 떡볶이 재료 고추장 떡 어묵 파 다진 마늘 - , 중첩 리스트 코드 구현 웹 페이지 2) 코드 - 정의 리스트는 (용어, 설명)을 하나의 아이..

텍스트에 폰트를 적용시키기 위해 CSS파일, 폰트 링크를 연결시켜 사용한다. 참고하면 좋을 사이트 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 링크를 접속해서 아래와 같은 방식으로 적용시켜보자! 1. 원하는 폰트를 선택한다. 2. 선택한 폰트 스타일 중 맘에 드는 걸 추가한다. 3. 아래와 같이 추가된 폰트를 확인할 수 있다. 4. HTML , CSS 파일에 적용한다. 단락을 나누어 아무말이나 작성해보자 폰트는 이렇게 적용시키지 - CSS .font1 { font-size: 30px; font-family: 'Jua', ..

웹페이지를 제작할 때 많은 텍스트를 사용하고 스타일화한다. HTML에서 다양한 텍스트 태그를 알아보자! 태그 의미 bold 굵게 표시 매우 중요한 텍스트 표시 부분 강조 표시 italic 이탤릭으로 강조 표시 부분 작게 표시 삭제 표시 언더라인 표시 윗첨자 아래첨자 하이라이팅 포인트! 1) , 태그의 차이점 - 태그는 특정 텍스트 강조하기 위해 굵게 표시 - 태그는 매우 중요, 긴급, 경고의 의미 2) 태그의 차이점 - 태그는 주위 테스트와 비교하여 해당 부분을 강조하고 싶을 때 사용 - 태그는 italic의 약자로 기울임 꼴로 표시 3) 태그 유의 - 아이콘을 첨부할 때 태그를 사용하니 단순히 기울임 글씨체를 원할 경우 CSS의 font-style : italic 활용하기! 윗 태그 구현한 코드 및 페..

HTML 태그들은 블록 태그와 인라인 태그로 나뉜다. 기본적인 브라우저는 블록 태그는 블록 박스로, 인라인 태그는 인라인 박스로 다루며, 각 태그에 따라 브라우저에서 차지하는 영역과 위치에는 많은 차이가 있다. 함께 알아보자! 블록 태그(BlockLine) 블록 태그는 상자(레이아웃)를 만들기 위한 태그이며 항상 새 라인에서 시작하고 모든 부분을 포함한다. 대표적인 태그 - , , , : 문서의 분할이나 섹션을 정의하며 특정 범위를 묶는 용도 사용한다. : 문단 제목(장, 절, 소제목 등), 제목의 글자 크기는 브라우저가 결정하며, CSS 스타일 시트를 이용하여 변경할 수 있다. : 단락 나누기 로 끝나는 문단 다음은 자동으로 빈 줄이 생긴다. : 순서 없는 리스트(unordered list) 인라인 태..