프론트엔드 기록

아우리 1시간 전 4K빔프로젝터 가성비최강으로 선택했어요. 어쩌구저쩌구쌸ㄹ랄랄ㄹ .container { width: 800px; } .left-container { width: 60%; float: left; } .right-container { width: 40%; float: left; } .profile-img { border-radius: 100px; width: 100px; height: 80px; float: left; margin: 10px; } p { float: left; } .time { font-size: 12px; color: grey; } .title { margin: 15px; clear: both; } .content { margin: 15px; color: grey; } 무엇..

HTML, CSS 2024. 1. 21. 08:32

display: block은 한 행을 전부 차지 display: inline-block은 내 크기만큼을 차지 즉, display-block을 사용해서 두 개의 를 가로 배치할 수 있다. 여기서 주의할 점은 inline-block을 사용하면 박스 사이에 공백 제거를 반드시 해야 한다. 부모 태그의 font-size: 0px;로 주게 되면 두개의 태그 사이에 공백이 있어도 가로 정렬이 가능하다. .container { width: 800px; } .header { width: 100%; height: 100px; background: pink; } .left-menu { width: 20%; height: 400px; background: rebeccapurple; display: inline-block; ..

HTML, CSS 2024. 1. 21. 05:48

다음의 코드를 사용하면 된다. display: block; margin-left: auto; marign-right: auto; 여기서 display: block이란? 가로행을 전부 차지하란 의미이다! , , 는 display: block이 기본으로 있다. 즉, 는 기본적으로 가로행을 모두 차지한다. 따라서 두개의 를 쓰게 되면 하나의 가 밑으로 내려간다. .container { width: 800px; } .header { width: 100%; height: 100px; background: pink; } .left-menu { width: 20%; height: 400px; background: rebeccapurple; /* float: left; */ } .right-menu { width: 8..

HTML, CSS 2024. 1. 15. 03:54

전환 효과 / Flexbox 전환? CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것입니다. EX) 빨간색 요소에 :hover 가상 클래스 선택자를 적용하여 마우스를 올렸을 때 파란색으로 변하게 하는 경우 -> 이런 전환이 발생할 때, 전환 효과를 직접 속성으로 지정할 수 있습니다. 전환 효과 사용시 transition-property, transition-duration 지정은 필수적입니다. transition-property 전환 효과를 적용할 대상 속성을 지정 transition-duration 전환 효과의 지속 시간을 설정 transition-delay 전환 효과 발생 지연 transition-timing-function 전환 효과의 진행 속도 지정 전환 효과가 가능한 ..

HTML, CSS 2023. 3. 29. 00:33

CSS의 특성: 폭포수, 상속, 우선순위 CSS는 Cascading Style Sheets의 약어입니다. Cascade란 폭포란 뜻인데 이것에서 유추가 가능합니다. CSS는 폭포수가 아래로 떨어질 때처럼 CSS에서 스타일이 적용될 때는 우선순위를 가지고 적용이 되기 때문에 이 모습이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었습니다. 같은 태그에 대한 규칙이 있는 경우 -> 마지막으로 작성된 규칙이 적용됩니다. Inheritance(상속)이란? 부모 요소의 css 규칙을 자식 요소가 상속하여 적용하는 것입니다. 자식 요소가 css 규칙을 가지고 있다면 이를 우선하여 적용합니다. Specificity란? css 규칙이 서로 충돌할 때 어떤 것을 적용할지 결정합니다. ..

HTML, CSS 2023. 3. 25. 02:49

더보기 Web의 등장 2000년대 초반에는 초고속 인터넷망을 사용했으며, CSS만 수정을 했습니다. 1990년에 팀 버너스리가 세계 최초의 웹 브라우저 WWW을 만들고 웹이 대중화되기 시작했습니다. 최초의 웹 사이트: http://info.cern.ch/ PC 통신과 WEB의 차이 PC 통신은 반 유선 공중전화망(PSTN)과 모뎀을 통해 연결되며, 연결되는 반대편에서 사전에 정해진 사업자 또는 개인이 서비스를 제공하는 폐쇄적인 형태이며, 속도가 느립니다. 반면, WEB은 개방되어 있고, 광랜(FTTH)를 사용하여서 속도가 빠릅니다. 1세대, 2세대, 3세대 웹의 발전과 특징 1. Web 1.0 :정보 제공 위주, 정적 어느 누구나 프로그램을 대중에게 공개할 수 있는 세상이 도래했었습니다. 전통적인 웹 시..

HTML, CSS 2022. 4. 28. 00:17