1. 기본 그리드 div1 div2 div3 div4 div5 div6 div7 div8 만약 그리드를 적용하려면 그 상위 부모에 그리드를 적용해야 한다. 본문에서는 item 클래스가 container에 속해있기 때문에 container에 display를 grid로 지정했다. grid-template-columns에 auto auto auto auto를 줬는데 한 줄에 몇 개를 표현할지 설정하는 것이다. 본문에서는 4개씩 나오게 된다. 2. 응용 1 div1 div2 div3 div4 div5 div6 div7 div8 grid-column-start , end와 grid-row-start , end로 각 그리드의 객체를 늘릴 수 있다. 각 숫자의 자리가 이렇다고 볼 수 있다. 그렇다면 본문처럼 div1..
각 홈페이지마다 가로범위를 줄이면 다르게 표현되는 홈페이지들이 있다. 이런 홈페이지들이 MediaQuery를 썼다고 할 수 있는데 한 상자를 만들어서 색은 토마토색 , 200 x 200 으로 만들었다. @media (max-width: 900px) { .container { background-color: dodgerblue; width: 100px; height: 100px; } } @media (max-width: 700px) { .container { background-color: violet; width: 300px; height: 300px; } } 만약 브라우저 크기가 900px 아래라면 , 색을 블루로 바꾸고 크기를 100 x 100으로 바꾸어지게 된다. 또 , 700px 아래라면, 색을 ..
1. Position이란? 말 그대로 요소를 배치할 때 사용하는 속성이다. 좌표값을 사용한다 X(Left), Y(top) 좌표 좌표를 지정하는 방식이 여러 개 제공된다 ( 좌표계 > 기준점 ) 2. Position의 종류 2 - 1 . Position - static 정적좌표이며 기본값이다 ( 디폴트값 ) FlowLayout 방식이다. 워드프로세서 방식이다 코딩 순서대로 출력된다 ( 위 > 아래, 왼쪽 > 오른쪽 ) 좌표값이 지원 안된다 ( Left , Top 사용 불가능하다) 2 - 2 . Position - absolute 절대 좌표이다 기준점은 문서의 좌측 상단 모든 태그가 동일하게 문서의 좌측 상단을 원점으로 한다 원래 있던 공간이 유지되지 않는다. 기준점(원점)은 자신의 부모에 가장 최근 pos..
1. padding , margin 기본적으로 여백을 남기는 것이다. padding 은 안쪽 여백, margin은 바깥쪽 여백이다. 위, 아래, 좌, 우 여백을 각각 지정하거나 한 번에 지정할 수 있다. 1. 지정방식 4방향을 한번에 적용 : 값 하나만 작성 ( margin: 10px; ) 위아래, 좌우를 각각 적용 : 값 2개 작성 ( margin: 10px 20px; ) 위, 좌우, 아래를 각각 적용: 값 3개 작성 ( margin: 10px 20px 30px; ) 4방향을 각각 적용: 값 4개 작성 ( margin: 10px 20px 30px 40px; ) margin-top, margin-bottom처럼 처음부터 따로 지정할 수 있는 속성도 있다. 즉 , 시계방향 ( 상우하좌 ) 순서다. 2. 예..
1. table 코드로 작성하다 보면 표를 만들어야 할 때 html에서는 , , 태그를 적절히 사용해 표를 제작할 수 있다. 2. 표 삽입하는 방법 2- 1 각 태그의 설명 태그 설명 표(테이블)의 시작과 끝을 의미한다 표(테이블)의 행을 의미한다 표(테이블)의 열을 의미한다 표(테이블의 제목을 의미하며 가운데 정렬과 굵게 효과가 기본적으로 제공된다 먼저 로 코드를 작성하고 블록 내부에 , 태그를 사용해 열을 만든다. 즉 , 블록 내부에는 , 가 있고 내부에 가 있는 것이다. 표의 내용은 태그 안에 놓아둔다. 2 - 2 사용법 1행 1열입니다 1행 2열입니다 1행 3열입니다 테두리의 기본값이 테두리 없음이기 때문에 테두리가 없다. 스타일로 재지정해줘야 하는데 td 테두리에 border로 1px 테두리를 ..
VS CODE 링크부분 div 입니다. 안녕하세요 가상 선택자 ( pseudo selector ) href에 #을 넣으면 링크는 나오나 이동되지는 않는다. a에 대한 hover로 컬러와 백그라운드 컬러를 지정해서 마우스를 갖다 대면 바뀌게 된다. div에도 hover를 적용시켰다. div p에 대해 display를 none으로 설정해 기본으로는 나오지 않지만 div : hover p 에 대해 display를 block으로 설정했기 때문에 마우스를 대면 바로 나오게 된다.
h2 요소 p 태그 요소입니다 div 안에 있는 p태그1 div 안에 있는 p태그2 div 안의 section 안의 p태그 1. 자손선택자 div p : div 안에 소속된 모든 p의 태그를 선택한다. ( 자손선택자, descendant selector ) 2. 자식선택자 div > p : div에 바로 안에 소속된 p 태그를 선택한다 ( 자식선택자, child selector ) 3. 인접형제선택자 div + p : div 바로 다음에 오는 p태그를 선택한다 ( 인접형제선택자, adjacent sibling selector ) 4. 형제선택자 div ~ p : div 다음에 오는 모든 p태그를 선택한다 ( 형제선택자, sibling selector ) 5. class에도 적용하기 h2 요소 p태그 요소..
1. 각 태그마다 출력되는 것 확인하기 hello 2. 링크 만들기 및 사진 첨부 vscode에서는 자동완성을 제공한다. ! 엔터 시 자동완성이 된다. link 문구는 구글 폰트를 사용한 것이다. style에서 div , p 문구는 font - family : 'Nanum brush Script", cursive 문구를 사용한다는 것이다. 타이틀 안 문구는 제목이라고 보면 된다. 이 선언의 어떠한 규정도 어떤 국가, 집단 또는 개인에게 이 선언에 규정된 어떠한 권리와 자유를 파괴하기 위한 활동에 가담하거나 또는 행위를 할 수 있는 권리가 있는 것으로 해석되어서는 아니된다. 모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는 것이 세계의 자유, 정의 및 평화의 기초이며, 인권에 대..
1. Visual Studio Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 다운로드를 하면 된다. 2. 각종 익스텐션 설치 매번 개발하는 컴퓨터, 노트북, 개발 환경이 바뀌기 때..
