HTML

display 속성 ( block, inline, inline-block) display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다. 각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다.block block 특징  - 항상 줄바꿈이 발생합니다. - 가로폭(width)는 화면 전체를 차지합니다. - width, height, margin, padding 속성을 지정할 수 있습니다. - block요소 안에는 inline 요소를 포함할 수 있습니다. - 대표적인 block요소 -> , , ,  inline inline 특징 - 줄바꿈 없이 다른 요소들과 한 줄에 배치될 수 있습니다.- width, height를 지정할 수 없습니다. - inline 요소는 content의 너비만큼 가..

브라우저의 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(webkit)이나 게코(Gecko)등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML,CSS,Javascript로 렌더링할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어진다. 1. HTML를 파싱 후 , DOM 트리를 구축한다. 2. CSS를 파싱 후 , CSSOM 트리를 구축한다. 3. javascript를 실행한다. * 주의할 점 ! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단 된다. 4. DOM과 CSSOM을 조합해 렌더 트리를 구축한다. * 주의할 점 ! display: none 속성과 같이 화면에서 보이지도 않고, 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다. 5. 뷰포트 기반으로 ..

index.html 코드 YouTube (eng) MY RECORDS 좋아하는 LP 소개, 자주 가는 레코드샵, 나의 음악 취향 조회수 15만회 2년전 #LP #레코드샵 #musicismylife 4.7천 공유 저장 Report KYURIN 규린 구독자 11.5만명 구독 UpNext 2021 KYEJEOL LIVE of BIG Naughty KYEJEOL LIVE 조회수 15만회 [LENIVERSE] EP.18 LE CAFÉ 2편 LE SSERAFIM 조회수 27만회 [playlist] 빈티지 러브 (Vintage Love) 리플레이LEEPLAY 조회수 9.8만회 style.css 코드 :root{ /* Color */ --white-color: #fff; --black-color: #140a00; --..

UpNext 화면 구성 전 코드 /* UpNext */ .UpNext { padding: 0 var(--padding); } .UpNext ul{ padding: 0 var(--padding); } .UpNext > .title { font-size: var(--font-medium); color: var(--grey-dark-color); margin-bottom: calc(var(--padding) / 2); } .UpNext .item { display: flex; padding: 10px; margin-top: var(--padding); } .UpNext .item .img { flex: 1 1 35%; } .UpNext .item .img img{ width: 100%; } .UpNext .i..

channel 화면 구성 전 코드 .info .channel { display: flex; justify-content:flex-start; border-top: 1px solid var(--grey-light-color); border-bottom: 1px solid var(--grey-light-color); } .info .channel .metadata { display: flex; align-items: center; } .info .channel .metadata img { width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; } .info .channel .metadata .info { display: flex;..

actions 화면 구성 전 모습 코드 .actions { display: flex; justify-content: space-around; padding: var(--padding) 0; } .actions button { display: flex; flex-direction: column; font-size: var(--font-small); background-color: var(--white-color); color: var(--grey-dark-color); } .actions button i { margin: 0 auto; margin-bottom: calc(var(--padding)/2); font-size: 20px; } .actions button i.active { color:var(-..

video info 화면 구성 (코드 적용하기 전 화면) 코드 .info .metadata .titleAndButton { display: flex; } .info .metadata .titleAndButton .title { font-size: var(--font-large); font-weight: 500; margin-right: var(--padding); } .info .metadata .titleAndButton .moreBtn { } .info .views { font-size: var(--font-small); color: var(--grey-dark-color) } css 공부 리스트의 점없애는 코드 list-style-type: none;

완성된 헤더부분 코드 header { display: flex; justify-content: space-between; padding: var(--padding); background-color: var(--white-color); color: var(--black-color); font-weight: bold; } header .logo { font-size: var(--font-large); } header .logo i { color:var(--red-color); } header .icons .fa-magnifying-glass{ margin-right: var(--padding); } 비디오 플레이어 부분 (코드 적용하기 전 화면) 코드 .player { text-align: center; }..