본문 바로가기

분류 전체보기169

08. HTML 메타(meta) 요소 ○ 메타데이터 - 데이터에 대한 데이터 - 데이터를 설명하는 데이터 (e.g. 사진 정보를 보면 나오는 날짜, 장소 등) - HTML 또한 데이터이기 때문에 그에 대한 메타데이터(문서 정보, 작성자 등)가 존재 ○ HTML meta 요소 - HTML 문서에 대한 정보를 안에 태그를 이용해서 넣는다 - : HTML문서에서 사용하는 문자셋을 인코딩 (필수) - : HTML문서에 대한 설명 (선택) - : 검색엔진 키워드 정의 (선택) - : HTML문서를 만든 사람 (선택) - : 뷰포트 설정 (필수) - : 정해진 시간마다 주기적으로 HTML문서를 새로고침 (선택) 2022. 4. 2.
(BBANG) 카페 노티드 안국 2번 방문한 후기_KNOTTED🍩 먹을거 사진은 매번 찍지만, SNS를 안해서 앨범에 방치되고 있는 사진들에 대한 안타까움으로 코딩 블로그에 살짝 얹어보는 맛집 포스팅 폴더 KNOTTED 도넛 먹기 힘들다!! 2번 방문이라고 하지만 사실 3.5번째 만에 그 유명한 노티드 우유크림도넛 먹은 후기😢 (한탄이 좀 길다.. 제일 밑에 요약있음) 0.5번째 시도 때는 올 1월 초로 거슬러 올라간다 안국역에 약속이 있어 갔는데 시간이 떠서 어니언을 찾아가던 중 정말 아무것도 없을 것 같은 골목에 줄서있는 사람들을 발견 오 뭐지?? 하고 보니까 노티드 도넛인 것이었다 유명하다고 하니 함 줄서서 먹어볼까라고 하던 찰나 뒤를 돌아보니, 골목의 줄은 반절이었고 인도의 통행공간을 비어두고 대로쪽 까지 늘어선 긴 줄을 보고 깔끔하게 돌아섰다 이건 일부러 간건.. 2022. 4. 2.
07. CSS display 속성 ○ display 속성 - 해당 요소가 화면에 어떻게 보일지를 지정 - display : none; 해당 요소를 화면에 출력하지 않음 - display : block; 해당 요소를 블록 레벨로 지정 - display : inline; 해당 요소를 인라인 레벨로 지정 (margin, float 적용X) - display : inline-block; 인라인 레벨요소이면서 블록 레벨 속성을 갖도록 지정 (margin, float 적용O) display: none: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. HELLO WORLD! Vestib.. 2022. 4. 1.
06. CSS Positioning (float, z-index) ○ float - 세로배치(기본)된 요소를 가로배치로 변경 - 왼쪽이나 오른쪽으로 배치가능 - 형식 : float : left | right ; BOX 1 BOX 2 BOX 3 BOX 4 ○ clear - float 속성 해제 - folat 속성을 해제하지 않으면 모든 요소들이 앞의 요소의 옆에 줄줄이 따라오므로 clear를 이용해 해제해 준다 - clear : left | right | both ; ○ z-index - 레이어 순서 정하기 - 가장 큰 수가 위로, 레이어 순서값은 음수도 허용 aa bb cc ○ 전체 레이아웃 구성하기 - position(배치방법), float(수평정렬), clear(float해제), z-index(레이어순서)를 사용해 화면 레이아웃을 구성 Header Section1 .. 2022. 3. 31.
05. CSS Positioning (position 속성) ○ Positioning (포지셔닝, 레이아웃) - 브라우저 화면 안에 박스 형태의 각 콘텐츠를 원하는 위치에 배치 하는 것 - 수평, 수직, 그리드 방향으로 배치할 수 있다 ○ Position 속성 - 형식 : position: static | relative | fixed | absolute | sticky ; - top, right, bottom, left 속성으로 위치를 지정 (상하좌우 여백으로 위치 조정) ○ 부모·자식 구조 (=Tree구조) - 부모(Parent) : 상위에 하위 요소를 감싸고 있는 요소 - 자식(Child) : 하위에 있는 요소 ○ Position : static - 문서의 흐름에 맞춰 배치 (가장 기본) - 수직으로만 배치 (top, right, bottom, left, z.. 2022. 3. 30.
04. CSS Reset ○ Reset의 필요성 (스타일 초기화) - 브라우저들은 각각 다른 기본 스타일을 가지고 있기 때문에 같은 CSS 스타일을 적용해도 화면에 출력되는 모습이 다를 수 있다. 이런 문제를 해결하기 위해서 스타일을 모두 초기화해서 동일하게 만든 뒤 CSS 스타일을 추가하면 브라우저와 상관없이 같은 화면이 출력되게 만들 수 있는데 이를 reset이라고 한다. ○ Reset 하는 법 - 보통 reset.css 파일을 하나 저장해두고 import하여 사용 Welcome to the Jungle Welcome to the Hotel California Welcome to the Black Parade - 많이 참조하는 reset 파일 ① Eric Meyer's "Reset CSS" : https://meyerweb... 2022. 3. 29.

티스토리툴바