반응형 개인 포트폴리오 사이트 Clone Coding(1)
Youtube [Bedimcode : Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode] 를 그대로 클론 코딩하면서 작성한 글임을 밝힙니다. https://www.youtube.com/watch?v=27JtRAI3QO8&list=PLMHwCGy6OXi5GoC_S9L75Q2UkIJwxgddb&index=13&t=408s 유튜브 알고리즘에서 뜬 코딩 영상이었다. 퀄리티가 생각한 것보다 좋아 보였고 차후에 포트폴리오 사이트를 제작하는데, 디자인적이나 코드의 짜임새, 그리고 기초적인 html,css,js에 대한 공부가 될 것 같아서 클론코딩을 해보면서 공부해보기로 했다. 영상에는 각 섹션이 나누어져있는데 오늘..
ocean project/clone / 2021. 9. 6. / dankthedust
html에 css와 별도 css파일의 효율성
지금까지의 강의 영상을 보고 진행하면서 코딩하였던 css 언어를 2.html을 메인으로 index.html, 1.html ~ 4.html까지 모두 적용하여 각 페이지가 링크를 통해 전환되면서도 통일화될 수 있도록 수정했다. 그런데 만약 이 페이지가 하나, 두 페이지가 아닌 여러 페이지로 구성되어 있다면, 작업의 수요는 모든 페이지가 해당 될 것이다. 그래서 하는 작업이 css를 html에 코딩하는 것이 아닌 별도의 css파일을 운영하는 것이다. 그리고 각 페이지에 css를 를 통해서 적용시키면 중복을 최소화하면서 간편하게 css 수정을 통해 모든 페이지에 동일한 수정 요소를 줄 수 있다. /* css폴더 내에 파일 이름이 style인 css파일 */ 이러한 작업은 파일의 중복을 제거해주는, 보다 효율적이..
ocean floor/css floor / 2021. 3. 4. / dankthedust
<div>를 통한 기본 Grid
html 언어인 태그에 대해서 배움에도 카테고리를 css에 분류한 이유는 태그는 다른 각각 고유의 의미를 가지는 태그(ex. , , , etc.) 등 사용시에 어떠한 효과를 보유하고 있지 않다. DIVISION(분할)의 줄임말인 태그는 css 요소를 활용하여 Grid를 적용하기 위한 태그라고 볼 수 있다. 태그는 Block Level Element로 화면 한 줄의 전체 영역을 가지고 있기 때문에 선언 시에 다음과 같이 줄바꿈이 되는 것을 확인할 수 있다. 앞 전 글에서 말했 듯, 위 아래로 구분을 짓는 것이 아닌 콘텐츠를 다음과 같이 좌우로 배치할 것이기 때문에 자식 를 감싸고 있는 부모 를 선언하고 명확한 영역을 시각적으로 확인하기 위해 css를 통해서 border를 적용한다. 이때 display: g..
ocean floor/css floor / 2021. 3. 3. / dankthedust
CSS Box Model
생활코딩에서 다음과 같이 앞 전 HTML 강의에서 작성하였던 페이지들을 다음과 같은 레이아웃에 따라 배치하고자 한다. 그전에 앞 서, Box Model에 대한 이해를 확실히 짚고 넘어가는 것이 좋다. 2.html 페이지, 그 중 태그와 태그에 적용을 하여 Box Model에 대해서 알아 보았다. 다음과 같이 의 CSS에 border에 5px, red 컬러에 solid를 주었고 태그에도 같은 css 속성을 넣어 Box 영역에 대해서 시각적으로 확인하였다. 과 같은 제목 태그는 block level element로 해당 영역의 전체를 보유하고 태그는 inline element로 자신이 가진 크기만큼의 영역을 기본값으로 가지는 태그이다. 다음과 같은 영역을 css에서 변경해주기 위해서 display라는 효과를..
ocean floor/css floor / 2021. 3. 1. / dankthedust
CSS class와 id
class와 id는 특정 HTML 요소에 대한 영향을 줄 수 있도록 지정하는 선택자(Selector)다. class는 둘 이상의 클래스를 선언이 가능하며 CSS 구문으로 .class(클래스 이름) { css(css 속성) declarations(효과); } 로 class 이름 앞에 . 을 붙여 스타일을 지정한다. 그리고 클래스 내에서는 여러개의 클래스 속성을 지정할 수 있으며 띄어쓰기로 구분한다. 다만 코딩 태그 내에서 속성은 여러개를 사용할 수 있는데, CSS 내에서 같은 class나 element에 대해서 중복된 CSS 스타일이 있다면 적용 우선순위가 있다. style { } 내에서 보다 아래에 있는 CSS 언어가 우선순위가 높다. 그 예로 다음과 같은 코딩 결과에서 그림(좌)에서는 CSS에 red ..
ocean floor/css floor / 2021. 2. 28. / dankthedust
CSS font와 text
CSS를 다루기 전에 간단히 내용을 다루어 보면, Selector(선택자), Declaration(선언자)로 나뉘어 지고 선언자 안에 Property(속성)과 속성에 대한 Value(값)으로 나뉜다. 간단히 사진을 통해 알아보면 으로 볼 수 있다. 간단하게 font에 관한 CSS문인데 먼저 font-size는 %, px, em, rem으로 크게 볼 수 있는데 %는 영역의 몇 퍼센트인지에 대한 값으로 부모 기준으로 자식의 넓이를 의미한다. px은 화면의 px단위에 따른 크기를 의미하고 모두들 이해 될 거라 생각한다. em과 rem에서 em 단위는 상위 요소 크기의 몇 배인지를 정하는데 기존 폰트 크기에 2em은 부모 폰트 크기의 2배가 적용된다. rem에서 r은 Root의 약자로 최상위의 태그에 적용된 사..
ocean floor/css floor / 2021. 2. 28. / dankthedust
