HTML CSS 학습

다시 기초를 쌓고 있는중이다.html css 기초부터 다시 시작하기 위해 공부 중이다.기초 탄탄하게 하면서 내가 원하는 프로젝트도 잘 구현할 수 있는 개발자가 되어야지.현재 기초를 다시 공부하면서 아래처럼 코드를 짰고, 이미지가 들어있는 상태다.이미지를 가운데에 배치시

프론트엔드 작업을 하면서도 실제로는 class에다가 style을 담아서 사용하다가 필요하면 인라인으로 하는 상황이 많다보니, 더 다양하게 다룰 생각을 하지 않았다.위처럼 코드가 되어있으면, Front-end Developer라는 글자는 어떤 색으로 보일까?당연 inli

프론트 작업을 하다보면 div 태그를 정말 많이 이용한다.이 때, div태그의 속성이 가로 한 줄을 모두 먹다보니, 난 한 번에 2개 이상의 div박스들을 놓고 싶은데, 계속 세로로 쌓이곤한다.이 때, 해결 방법 중에 float 방법을 사용할 수도 있다.위와 같이 있을

강의를 듣던 중 아래와 같이 블로그 글 목록의 1개의 형태를 잡아야 하는 게 있었다.html과 css를 이용해서 하는데, css는 할 때마다 적응이 안된다.이런 것은 당연히 큰 틀을 잡고 하는게 편해서초기에 div태그로 큰틀, 왼쪽 오른쪽, 왼쪽에서의 상하, 또 그 안

selector를 이용하면 코드치느라 소요되는 시간을 조금이라도 줄일 수가 있다.여기서 상속이 된다곤 하지만, 각 li 스타일을 입히기 위해 class를 작성하고, style을 입혀서 하는 방법은 귀찮고 오래걸릴 수 있다.하지만 selector를 사용한다면?navbar

위와 같이 구현을 해놓고버튼의 위치를 조정해보려한다.margin을 이용해서 위로 아래로 옆으로 이동시키는 방법도 있지만, position을 이용해보자.position을 relative로 설정하고, top 100px을 시행했다.그러니 내가 있어야 할 원래 위치에서 버튼의

현재 아래처럼 있는 html이 있다.줄이면 짤린다.늘리면 공간이 많이 남는다.여기서 반응형으로 width를 적용시키려고 한다.style에서 %와 max를 잘 활용해보자.explain-box의 스타일에서 width를 %로 만들고, max-width와 min-width를

table 사용 div를 이용해서 테이블을 만들 수도 있지만, html에서는 표를 만드는데 이미 도움이 되도록 관련 태그가 있다. table 태그를 비롯한 것들이다. 우선 위처럼 해주었다. 참고로 를 사용하면 table이 가진 틈을 없애기 위해 사용했고, 사용하지

버튼을 예로 들어서 Pseudo-class 셀렉터를 진행해봤다.평상시, 마우스 오버, 누르고 있을 시, 눌렀을 시의 색을 위 사진에서 보이는 것처럼 구현할 수가 있었다.이를 이용하기 위해서는 순서가 매우 중요하다.:hover:focus:active순으로 넣어야지만 올바

기본적으로는 아래처럼 할 수 있지만, 이러기 위해서는 브라우저를 연 사람들의 pc에 해당 폰트가 설치되어있어야한다.위 방법 처럼 적용하려고 하는 폰트가 있는데, 사용자 pc에 없는 경우도 있다.이럴 때 아래처럼 해보자.우선 적용하려는 폰트를 작업중인 폴더에 담아두고,

flexbox를 사용해보자.이런 식으로 있을 때 가로로 배치하고 싶다면?가로 배치하려는 태그들의 부모에다가 display:flex를 적용 시키면 된다.만약 여기서 꽉 채우고 싶다면아래처럼 또 flex-item의 width를 100%로 바꿔보자.width: 700px;로

위와 같이 있는 것을 브라우저에서 PC화면에서는 1줄에 4개를 보여주고, 태블릿 화면에서는 1줄에 2개, 모바일 화면에서는 1줄에 1개씩 보여주도록 해보자.우선 먼저 사용된 html코드는 아래와 같다.여기서 flex를 사용해서 움직이는 방법도 있겠지만, float를 이

지금 간단하게 만져보던 todo가 어쩌다보니 몹시 디테일한 것에도 손이 갔다. 지금 날자를 선정하는 코드를 만드는데 custom으로 진행하다보니, 이를 좀 더 사용자 친화적이게, 스크롤을 내리면 어중간한데서 끝나는게 아닌, 딱 해당 div나 p 태그에 걸리도록 하고 싶