Coding Diary.

1. 그리드 나누기display 속성을 grid로 하고 grid-template-columns 속성으로 열을, grid-template-rows 속성으로 행을 나눌 수 있습니다. 예를 들어거 3x2 그리드를 만드는데, 열 너비는 각각 100px, 200px, 100px이고 행 너비는 150px, 200px이라면 아래와 같이 쓸 수 있습니다.display: grid;grid-template-columns: 100px 200px 100px;grid-template-rows: 150px 200px; 2. 유연한 크기 단위fr 이라는 단위를 사용하면 플렉스박스처럼 전체 크기에 대해 상대적인 값을 지정할 수 있습니다. 예를 들어서 3x2 그리드에서 열의 너비를 1:1:1로 하고 싶다면 아래와 같이 하면 됩니다.d..

1. 플렉스박스 만들기 display: flex; 2. 기본 축과 교차 축 3. 배치 방향 flex-direction 을 사용하면 기본 축의 방향을 정할 수 있습니다. 이때 기본 값은 row 입니다. 4. 기본 축 정렬 : justify-content justify-content를 사용하면 기본 축 방향으로 정렬할 수 있습니다. 기본 값은 flex-start 입니다. 5. 교차 축 정렬 : align-items 교차 축 방향으로 정렬할 때는 align-items를 사용합니다. 기본 값은 stretch(늘려서 배치하기) 입니다. 6. 요소가 넘칠 때 : flex-wrap 요소가 넘치는 경우 flex-wrap: wrap 을 지정해주면 교차 축 방향으로 넘어가서 배치됩니다. 7. 간격 : gap 숫자를 하나 ..

1. Position 속성 글의 흐름에서 벗어나서 요소들을 자유롭게 배치할 때 쓰는 속성입니다. position에 따라서 위치를 정하는 기준이 달라집니다. 기본 값은 static이고 static인 경우 원래 있어야 할 위치에 배치됩니다. 2. 위치 정하기 위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있습니다. 값이 모두 똑같은 경우 inset 속성을 씁니다. 3. relative 포지션 요소의 원래 위치를 기준으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하고 있습니다. .green { position: relative; top: 15px; left: 10px; } 4. absolute 포지션 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배..

1. link 태그 외부에 있는 것을 불러올 때 사용하는 태그입니다. 어떤 목적인지를 rel 속성에 적습니다. 위치는 href로 지정하면 됩니다. 주로 사이트 아이콘을 불러올 때는 rel="icon"라고 씁니다. 2. 를 꼭 써주어야 합니다. ... 3. 4. 시맨틱 태그 와 기능은 똑같지만 의미가 담겨있는 태그들을 시맨틱 태그라고 합니다. 사용법이 있는것은 아니고 작성하는 사람의 의도가 중요합니다. 시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEQ)나 접근성(Accessibility)를 높이는데 도움이 됩니다. 태그 이름 용도 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 ..

1. 기본적인 폼의 형태 아이디 비밀번호 로그인 2. 라벨 태그로 을 감싸면 라벨을 클릭했을 때 인풋에 포커싱이 됩니다. 아이디 라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱이 됩니다. 아이디 3. 인풋 name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름입니다. 아래 코드에서는 인풋에 입력한 값이 username이라는 이름에 매칭됩니다. 아이디 type 속성을 사용하면 다양한 인풋을 사용할 수 있습니다. 대표적으로 입력한 값을 가려주고 싶을 때는 type="password"를 사용합니다. 비밀번호

1. 값이 비어있을 때 보여주는 값 placeholder 아래의 예시와 같은 구글 로그인 화면에 있는 "이메일 또는 휴대전화" 같은 것을 "플레이스 홀더"라고 부릅니다. 이러한 값을 추가하려면 placeholde라는 속성을 쓰면 됩니다. 이때 placeholder의 디자인을 바꾸려면 CSS 선택자로 ::placeholder를 활용하면 됩니다. input::placeholder { color: #dddddd; } 2. 반드시 입력해야 하는 값 required 폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 써주면 됩니다. 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않습니다. 3. 자동완성 autocomplete 예전에 입력한 값들을 보여주는 인풋은 auto..

태그에서 type 속성을 password로 하면 입력한 내용이 가려지는 비밀번호 인풋을 만들 수 있습니다. type에 쓸 수 있는 여러 가지 값들을 알아봅시다. 1. 체크박스 checkbox 1) 한 항목만 선택하는 경우 아래의 예시에서 '동의합니다'에 체크하는 경우 agreement 값이 on이라는 문자열로 지정됩니다. 동의합니다 2) 여러 항목 중에서 몇 항목을 선택하는 경우 태그에 value 속성으로 값을 지정해주면 선택된 항목의 지정된 값이 쓰입니다. 예를 들어 아래의 코드에서 "액션"이랑 "코미디"를 선택했을 때 film의 값으로 action과 comedy라는 문자열이 지정됩니다. 폼을 전송했을 떄 쿼리 문자열에서는 &film=action&film=comedy처럼 전송됩니다. 좋아하는 영화 장르..

1. 이미지 파일 주소는 src 속성으로 지정합니다. 크기는 width와 height 속성으로 단위 없이 지정합니다. (CSS로도 크기를 지정할 수 있습니다.) 이미지에 대한 설명은 alt 라는 속성을 사용합니다. 2. 비디오 파일 주소는 src 속성으로 지정합니다. 크기는 width와 height 속성으로 단위 없이 지정합니다. (CSS로도 크기를 조절할 수 있습니다.) 그 외에 자동 재생을 하는 autoplay 속성, 음소거를 하는 muted, 조작하는 버튼들을 보여누는 controls 속성이 있습니다. 특히 자동 재생은 불쾌감을 줄 수 있기 때문에 크롬 브라우저에서는 반드시 muted와 함께 써야합니다. 3. 오디오 파일 주소는 src 속성으로 지정합니다. 자동 재생을 하는 autoplay, 조작하..

1. 테이블 정보를 표로 나타낼 때는 태그를 사용합니다. 테이블 행은 (Table Row)태그로 감쌉니다. 각 데이터들은 (Table Data) 태그로 넣습니다. 2. 머리글 표에서 머리글은 태그로 감싸면 됩니다. 행은 태그로 감싸면 됩니다. 각 행 안에 있는 것들은 제목이기 때문에 가 아니라 라는 태그를 넣습니다. 본문에 해당하는 행들은 라는 태그로 감쌉니다. 3. 바닥글 표에서 바닥글은 태그로 감싸면 됩니다. 와 마찬가지로 행은 로 감쌉니다. 제목으로 쓰는 칸은 태그를 넣습니다. Premium Standard Basic 다운로드 무제한 월 30회 불가 ... 화질 최대 FHD HD ₩15,900 ₩10,900 ₩8,900

1. 순서 리스트(Ordered List) 항목들 사이에 순서가 있는 목록을 작성할 때 이라는 태그를 감싸고, 그 안에 항목은 태그를 씁니다. 상영작 순위 라라랜드 명량 극한직업 국제시장 어벤져스: 엔드게임 2. 순서 없는 리스트 (Unordered List) 항목들 사이세 순서가 없는 목록을 작성할 때 이라는 태그를 감싸고, 그 안에 항목은 태그를 씁니다. 상영작 순위 라라랜드 명량 극한직업 국제시장 어벤져스: 엔드게임 3. 리스트 스타일링 순서 리스트에서는 type 속성으로 기호를 바꿀 수 있습니다. 라라랜드 명량 극한직업 국제시장 어벤져스: 엔드게임 list-style 이라는 CSS 속성으로도 바꿀 수 있습니다. ul { list-style: disc; /*동그라미 */ } 기호를 없애고 싶을 때는..