whatisthis?

Box - Block - Inline - Inline Block - Flex display 속성 - box 의 속성을 바꿔줌. 모든 html 요소는 box로 표현되므로 display를 가지고 있음. Inline Block Inline 과 Block의 좋은 점을 합친 느낌. 지난 inline box 예제에서 의 display를 inline-block으로 설정해주자. span { display: inline-block; } display: inline (span의 default값) 일때는 ❌❌❌❌ 사용불가 ❌❌❌❌ width , height padding (top/bottom) border (top/bottom) margin (top/bottom) 위와 같은 특성때문에 padding-bottom을 해주면 위..

Box - Block - Inline - Inline Block - Flex display 속성 - box 의 속성을 바꿔줌. 모든 html 요소는 box로 표현되므로 display를 가지고 있음. Inline Box = 글자 처럼 취급. Box를 상하로 정렬했다면 Inline은 옆으로 늘이는 느낌. box 타입은 한 줄을 전부 차지해서 위-아래로 쌓이지만, inline 타입은 한 줄을 전부 차지하지 않기 때문에 한 줄에 여러 inline을 옆으로 늘일 수 있다. 대신, 만약 너무 길어진다면 자동으로 줄바꿈 된다. ** block = 면 (영역을 잡기 위해) ** inline = 선 (content를 옆으로 흐르게 하기 위해) 💡 ❌❌❌❌ 사용불가 ❌❌❌❌ width , height padding (to..

Box - Block - Inline - Inline Block - Flex display 속성 - box 의 속성을 바꿔줌. 모든 html 요소는 box로 표현되므로 display를 가지고 있음. Block - 한 줄을 전부 차지. (block : 막다 / 차단하다) - 다음 element가 자기 옆에 오지 못하고, 아래에 오도록 막아버림 1. block의 width를 따로 설정하지 않는다면, 자신의 부모의 content-box (100%) 만큼 width를 차지함. Child 2. block의 width를 따로 설정해주면? 남은 공간은 margin으로 자동으로 채움. width: 300px로 설정한다면? 남은 공간 ( 위 사진상 주황색 부분 ) 은 margin으로. computed에서 값으로 나와있진..

index.html Hello CSS style.css .box{ width: 480px; height: 480px; padding-left: 50px; padding-top: 40px; background-color: #0066FF; color: #FFF; } 우리가 원하는 결과는 정사각형 (480* 480) 인데, 개발자도구로 확인해본 결과 530*520으로 되어있다. 탭에서 확인해보니 우리가 width/height를 설정해준 부분은 content이고 padding까지 포함하니 더 커지는 것. 그래서, 전체 크기가 480*480이 되게 하려면 계산을 해서 padding left와 top값을 빼줘야함. .box{ width: 430px; height: 440px; padding-left: 50px; p..

content > padding > border > margin 순으로 바깥으로 뻗어나간다. 또한 각 값은 left, right, top, bottom으로 나눠져서 값을 따로 지정해줄 수 있다. 예> border-right : 20px; img cr : https://www.geeksforgeeks.org/ 가로 = width 세로 = height 1/ content content, 즉 내용을 담는 공간. 2/ padding content와 border사이에 안쪽 여백. 3/ border 테두리. (굵기 / 스타일 / 색상값 필요 - 순서는 무관) border: 1px solid #000000 border: none - 테두리 없앰 위쪽에만 border을 만들고 싶다면? border-top: 1px so..

CSS = Cascading Style Sheet 스타일을 분리해서 관리하기 위한 것. - Document + Style 스타일 없이 html로만 웹페이지를 만든다면? - 정보를 주기 위한 HTML의 본질을 잃게 됨 웹사이트의 스타일을 일관적으로 적용 유지보수도 용이함 CSS SYNTAX 1) 선택자 selector 스타일을 적용할 대상 지목. 전체/클래스/아이디/요소 선택자 등 다양한 선택자가 있다. 2) 선언부 property : value; 의 형태로 이루어짐. (속성과 속성값) 세미콜론(;)은 한 문장이 끝날때마다 꼭 써줘야함. 문장의 종결을 알리는 콤마와 같은 역할. How to use CSS? 1. link:css 이용 - emmet 기능으로 link:css라고 입력하면 다음과 같이 코드가 나..

Video Player Video Player video 태그로 마크업 하는 방법. 방법1. 이 방법으로는 만약 해당 파일이 재생이 안된다면, 영상이 재생되지 않는다. 만약 사용자의 브라우저가 mov 형식을 지원하지 않는다면 ? - 재생 안됨! 따라서, 사용자 친화적인 마크업을 위해서는 아래 방법대로 source 태그를 사용한다. 방법2. ** source 태그의 필수 속성 = src / type 오디오든 비디오는 source를 사용할 때는, type을 꼭 명시해야함. 예> 위와 같이 마크업 해주고, 나머지 헤딩과 내용부분을 마크업하자. 주짓수 4주차 롤링 영상 30초 만에 압살 실화인가 그리고, css 적용을 위해서 div로 분할해줌. video 또한 플레이어를 나타나게 하기 위해 controls라는 ..

Music Player audio 태그를 이용한 마크업 연습. 마크업을 하기 위해 섹션을 나눠보자. 음악 플레이 '리스트'이므로 리스트로 마크업해야한다. 또한, 이때는 재생되는 순서가 결정되므로 ordered list, 즉 ol을 사용해야한다. html lang="en"으로 하되, 한국어가 들어가는 태그의 속성에 lang="ko"를 적어준다. 위에처럼 alt,즉 대체텍스트에는 한국어로 작성했으므로 lang="ko"를 해주었다. 노래 제목은 제목에 해당하므로, heading 태그로 마크업해준다. 대신, 한글이 들어가므로 span으로 감싸준 후 lang="ko"를 적어준다. 러브 엑스 마키나 Love Ex Machina 더보기 Q. 왜 굳이 h1에 바로 lang="ko"를 하지 않고 span으로 감싸주었을까..

Gmail Inbox 우선, 마크업을 하기 전에 어떤 방식으로 마크업할지 생각해보자. 방법 1. 리스트 이용 (두 줄이 비슷한 구조이므로) 방법 2. 테이블 이용 (각 내용들이 분류가 똑같이 나누어지므로) 이때는, 리스트보다는 테이블을 이용하여 마크업해주는것이 바람직하다. 강의 내용은 생략. index.html Actions Sender Titles Timestamp Select this Email Add to Favorites Goorm Edu Unread: Rate your course: FRONTEND 101 WITH KIMBUG - Woohyeon. How’s everything going? We want to hear your opnion on.. 3:34 PM Select this Email ..

HTML href=" " 태그로 외부 CSS파일을 불러올때 사용 태그에 url을 입력할 때 사용 src=" " 로 외부 js파일을 불러올 때 사용 태그에 url을 입력할 때 사용 link인 경우 href link가 아닌 경우 (이미지,비디오 등) src CSS url( ) CSS 코드 또는 HTML의 에서 특정 파일을 불러올 때 사용 background-image: url("../images/google.png"); REFERENCE https://developer.mozilla.org/ko/docs/Web/HTML/Element/link : 외부 리소스 연결 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. 는 스..