영국 척척석사 유학생 일기장👩🏻‍🎓

1. 제목 태그 ~ 문서의 제목을 나타내는 태그입니다. 한국 영화 한국 영화의 역사 1950년대: 침체기 1960년대: 황금기 1970년대: 쇠퇴기 1980년대: 암흑기 1990년대: 전환점 2000년대: 르네상스 2010년대: 최전성기 2020년대: 대격변 유명한 한국 감독 박찬욱 봉준호 임권택 김기덕 김기영 최동훈 위 HTML 코드에 담겨 있는 정보의 구조를 그려보면 아래와 같습니다. 이런 식으로 문서에서 제목을 나누는 태그 입니다. - 한국 영화 - 한국 영화의 역사 - 1950년대: 침체기 - 1960년대: 황금기 - 1970년대: 쇠퇴기 - 1980년대: 암흑기 - 1990년대: 전환점 - 2000년대: 르네상스 - 2010년대: 최전성기 - 2020년대: 대격변 - 유명한 한국 감독 - 박찬욱..

1. 링크의 상대 주소(Relative URL) 현재 폴더는 점 한 개(./)로 표시하고, 상위 폴더는 점 두 개 (../)로 표시합니다. 최상위 폴더는 경로 맨 앞에 /로 시작하면 됩니다. 특히 index.html 파일은 이름을 생략하고 폴더 이름만 쓸 수 있습니다. 위에서 myeong-ryang.html에서 최상위 폴더에 있는 index.html 로 연결하는 링크 예시 홈페이지로 가기 홈페이지로 가기 홈페이지로 가기 홈페이지로 가기 2. URI 프래그먼트(URI Fragment) 페이지의 특정 부분을 가리키는 주소입니다. 원하는 곳에 id 속성을 지정해두고, 링크 주소로 사용할 때는 맨 끝에 #으로 시작하년ㄴ #아이디-이름 을 쓰면 됩니다. 팀 버너스라는 "인터넷 사용 자체가 인권" [1] 이라고 말..

링크는 보통 해당 주소의 페이지로 연결해 줍니다. '페이지 연결' 외에 다른 동작들도 가능합니다. https://나 http://대신에 다른 내용을 넣으면 되는데, 이런 약속들을 URI 스킴(URI Scheme)이라고 부릅니다. 1. 이메일 보내기 mailto: 라는 걸 사용하면 이메일을 보낼 수 있습니다. 이 링크를 클릭하면 이메일 프로그램이나 이메일 앱을 열 수 있고, 받는 사람 주소에 링크에 적힌 이메일 주소를 자동으로 입력해 줍니다. 메일 보내기 2. 전화 걸기 tel:를 사용하면 전화를 걸 수 있습니다. 데스크톱 컴퓨터에서는 전화 기능이 없을 수 있지만, 스마트폰에서 이 링크를 클릭하면 전화 앱으로 연결됩니다. 전화 걸기

1. 캐스케이드(Cascade) 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는걸 말합니다. 한국어로는 "종속"이라고 번역하기도 합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다. 2. 스타일 시트의 종류 브라우저에서 기본적으로 제공하는 스타일시트(Use Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮습니다. 예를 들어서 브라우저 기본 CSS에서 아래처럼 쓰고 있다고 가정해 봅시다. h2 { display: block; font-size : 1.5em; ... font-weight : bold; } 이때, 우리가 style.css 파일에서 아래처럼 쓰면, 우리가 작성한 스타일시트(A..

1. 선택자 CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부릅니다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있습니다. 선택자 { 선언; 선언; 선언; } 2. 선택자 목록 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있습ㄴ디ㅏ. 선택자1, 선택자2 { ... } 3. 선택자 붙여 쓰기 여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있습니다. 예를 들어서 아래 HTML 코드에 있는 태그를 선택해 보겠습니다. 몽골 대자연으로 떠나는 여행 예시1. 아이디 + 클래스 #mongolia.title 예시2. 클래스 + 클래스 .large.title 예시3. 태그 + 아이디 + 클래스 h2#mongolia.large.title 4..

1. 블록디스플레이에는 블록과 인라인이 있습니다. 그 중 블록(block)은 , , 같은 것들 입니다. 블록은 위에서부터 아래로 배치됩니다. 너비와 높이를 지정할 수 있다는 특징이 있습니다. 2. 인라인인라인(inline)은 , , , 같은 것들 입니다. 평소에 글 쓰는 방향과 일치하며 화면에 꽉 차면 다음 줄로 넘어갑니다. 블록과 달리 너비와 높이를 지정할 수 없습니다. (태그는 예외) 그리고 여백은 가로로(글 쓰는 방향)만 가능합니다.3. 인라인 블록인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성입니다.4. float요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있습니다.5. 블록, 인라인 블록, 인라인 비교

1. 박스 모델(Box model) HTML/CSS에서 요소는 기본적으로 박스 형태입니다. 밖에서부터 차례대로 바깥 여백인 마진, 태두리인 보더, 테두리와 실제 내용 사이의 여백인 패딩, 그리고 실제 내용이 들어가는 콘텐트 박스가 있습니다. 2. border 속성 주로 굵기, 테두리 종류, 색상 순서로 씁니다. 예를 들어서 아래 코드는 2px 굵기의 실선으로 옅은 회색(#ededed)를 사용한 겁니다. border: 2px solid #ededed; 3. border-radius 속성 박스 모델의 모서리를 둥글게 만들 때 사용합니다. border 속성 없이도 쓸 수 있습니다. 아래 코드는 16px 만큼 둥글게 하는 코드입니다. border-radius: 16px; 참고로 50% 만큼 둥글게 하면 타원 형..

1. Padding 영역 안쪽에 여백을 넣을 때 사용합니다. 숫자의 순서는 시계 방향으로 0시 -> 3시 -> 6시 -> 9시 순서입니다. 패딩 값을 각각 주고 싶을 때 쓰는 속성들입니다. 상,우,하,좌 값을 따로 썼던 걸 속성으로 나눈 거라고 생각하면 됩니다. 아래의 두 코드는 똑같은 코드입니다. padding: 16px 8px 24px 10px; padding-top: 16px; padding-right: 8px; padding-bottom: 24px; padding-left: 10px; 2. Margin 영역 바깥쪽 여백을 넣을 때 사용합니다. 특히 좌우, 바깥 여백의 경우에는 auto 라는 것을 사용해서 자동으로 채울 수 있었습니다. 여기서 주의할 점은 요소의 width 속성이 정해져 있어야 자동..

카드에 그림자를 넣고 카드 요소 일부분에 반투명하게 만드는 방법에 대해 알아보겠습니다. 1. 그림자 box-shadow 가로, 세로 위치, 흐린 정도(Blur), 퍼지는 정도(Spread), 색상의 순서로 씁니다. box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6); /* 가로: 5px 세로: 10px 흐린 정도(Blur): 15px 퍼지는 정도(Spread): 8px 색상: rgba(0, 0, 0, 0.6) */ 참고로, 구글에서 box shadow generator라고 검색하면 여러 그림자를 만드는 속성을 볼 수 있습니다. 2. 불투명도 opacity 요소 전체의 불투명도를 조절할 때 사용합니다. 0에서 1 사이의 소수 값으로 단위 없이 쓰면 됩니다. opacity..

오늘은 배경이미지를 넣는 CSS 속성에 대해 알아보겠습니다. 1. 배경이미지 넣기 backgroun-image 1) 배경이미지 배경이미지를 넣는 CSS코드는 background-image 입니다. url(...)이라는 문법으로 배경이미지를 넣습니다. backgound-image: url('flowers.png') 배경이미지는 여러 개 넣을 수 있습니다. 아래처럼 이미지를 배경으로 넣으면 a.png 아래에 b.png 가 깔리고, 맨 밑에는 c.png 가 깔립니다. background-image: url('a.png'), /* 제일 위에 보이는 이미지 */ url('b.png'), url('c.png'); 2) 배경의 위치 background-position 기본값은 left top(왼쪽 위)이고, 가운데 ..