웹 개발 공부

inline display 속성이 inline으로 지정된 엘리먼트는 전후 줄 바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline엘리먼트로 이나 , 태그 등을 들 수 있습니다. inline 엘리먼트를 사용할 때 주의할 점은 width, height 속성을 지정해도 무시된다는 것입니다. 이유는 해당 태그가 마크업 하고 있는 콘텐츠의 크기만큼만 공간을 차지하도로고 되어있기 때문입니다. margin과 padding 속성은 좌우 간격만 반영이 되고 상하 간격은 반영되지 않습니다. block display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. inline-block inline 엘리먼트처럼 width와..

1. 정적 위치(static position) 지정 방식 2. 상대 위치(relative position) 지정 방식 3. 고정 위치(fixed position) 지정 방식 4. 절대 위치(absolute position) 지정 방식 absolute 요소를 일반적인 문서 흐름에 제거하고 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 부모 요소 혹은 조상 요소 중 position속성이 relative인 요소에 대해 상대적으로 배치합니다. 위치는 top, right, left, bottom 이 있습니다. relative 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right,bottom, left의 값에 따라 오프셋을 적용합니다.오프셋은 다른 요소에는 영향을 주..

이 블로그 시작할 때 말투에 대해서 고민을 했었는데, 제 책상이 두두두 타자 울리기도 해서 조금이라도 줄일 겸, 그리고 "~다"로 해보니 편해서 "~했다." "~했었다."라는 투로 진행했었습니다. 근데 하다 보니 뭔가 이 투는 거만한 투가 아닌데도 거만한 느낌이 들더군요. 아마도 누군가에게 가르치는 수준도 안 되는 제 실력으로 인해 생긴 이질감인 듯합니다.. 이 투로 쓰면 또 뭔가 가르치는 것 같기도 해서 존칭을 쓰기로 정했습니다. 오늘 안에 게시글 다 수정하려고 했으나 블로그에 제 하루를 쓰기에는 공부하고 취업준비를 해야 하는 입장으로서 너무 초조함도 들어 이전 게시글을 하루에 2개씩 해서 차차 수정 해갈 계획입니다. 하루에 2~4개씩 수정해서 완료했습니다. 하트 클릭 시 나타나게해서 날아오르게도 할 ..

# HTML 준비중 준비중 준비중 # CSS .menu-columns{ position: fixed; left: -75px; } 살짝 감추고 있다가 마우스를 대면 나타나는 효과와 스크롤 내려도 같이 이동하게 하기 위해 position:fixed를 사용합니다. .menu-columns__ul__item{ width: 120px; height: 50px; border-radius: 5px; background-color: white; /* -- item마다 아래 간격주기 -- */ margin-bottom: 15px; /* -- 마우스가 올라가면 커서 모양이 바뀜 -- */ cursor: pointer; /* -- span text 중앙 정렬 -- */ text-align: center; line-heigh..