본문 바로가기

장원익 기술블로그

📺 Front End/- HTML,css,Javascript29

[CSS] CSS 작업시에 꼭 거쳐야하는 필수 과정 :: CSS Reset, HTML 요소 초기화, 리셋 css 오늘은 웹 개발에서 CSS 파트를 작업할 때 거쳐야하는 필수 과정인 *Reset Css *에 대해서 알아보려 한다. CSS Reset css reset은 HTML Element의 Default 값들을 없애주는 작업이다. 일반적으로 margin, font, padding, line, size등등과 같은 속성의 값들을 0 또는 none으로 만들어야 한다. 위에서 보이다 싶이 Firefox3와 IE7이 보여지는 방식이 달라 개발자가 의도한 대로 웹이 보여지지 않을 때가 있다. 이 경우 위에서 말한 듯이 모든 Element의 속성 값들을 없애야 한다. 왜? 웹 표준을 지키며 작업해야 하는 현대 개발 환경에서 IE가 아닌 다른 여러 브라우저에서 개발자가 의도한 대로 보여져야 한다는 요구사항은 선택 사항이 아닌 필.. 2020. 10. 6.

[CSS] Css Box-Model과 box-sizing의 border-box 속성 지난 시간에 우리는 box-model의 크기 속성을 구하는 작업을 했었다. 하지만 지난 시간에도 말 했듯이 박스 모델링을 적용한 후 반응형 웹을 만들기 위해 크기의 단위를 px가 아닌 % 단위로 적용했다고 가정해보자. 그럼 아래의 Element의 속성 값 단위는 px가 아닌 %가 되어야 한다. 그럼 정말 정말 정말 복잡해진다. 힘들게 우리는 border, margin, padding 값을 구해서 ( 물론 그렇게 힘들진 않지만 ) width와 height의 계산식에 대입하여 구했지만 이 계산식이 %가 들어가면 단순 + 계산으로 힘들다는 것을 알 수 있다. 이러한 문제점을 해결하기 위한 방법이있다. 바로 Box-sizing이다. box-sizing 위의 절대 단위에서 상대 단위로 변경하는 문제점을 해결하기 .. 2020. 10. 5.

[CSS] Css Box-Modeling 사이즈 계산 오늘은 Box-model의 사이즈 계산 방법에 대해서 알아볼 것이다. Box-model의 기본적인 개념에 대해서 모르는 사람은 해당 링크로 가서 한 번 가볍게 읽고 오는 것을 추천한다. Box-Model Box 모델을 사용할 때 우리는 각 Element에 border, padding, margin을 이용하여 크기를 지정한다. 오늘은 해당 Element의 크기를 계산하는 방법에 대해서 알아볼 것이다. 예를 들어 아래와 같은 Element가 있다고 가정해보자. div { width: 50px; height: 50px; padding: 30px; border: 1px solid #ff margin: 30px; } 계산하기 계산는 height와 width가 따로 계산 되어야 한다. width height 그럼 .. 2020. 10. 5.

[CSS] margin, padding Definitions 순서 :: (margin, padding 순서) margin과 padding의 설정 값 순서 css에서 margin과 padding의 값을 넣어줄 때는 크게 2가지 방법이 있다. 직접 지정하기 : margin-top: 10px, padding-left: 5px, margin: 10px ... 값 순서 지정하기 : margin: 5px 3px, padding: 1px 1px 1px 1px; 오늘은 이 두 방법에 대해 사용법과 차이점을 알아볼 것이다. 직접 지정하기 margin: 10px margin-top: 10px; margin-right: 20px; margin-bottom: 15px; margin-left: 5px; 첫 번째는 상하좌우 모두 10px로 지정하는 방식이고 나머지는 top, right, bottom, left등을 직접 지정하는 방법이다.. 2020. 10. 5.

[CSS] 세련된 Layout 구성을 위한 Flexbox 개념 및 추천 학습 사이트 해당 포스팅에서 flex에 대한 설명을 간단하게 하고 왜 flex를 사용해야하고 어떤 장점이 있는지 설명할 것입니다. 자세한 코드 설명과 속성들에 대해서는 더욱 잘 정리된 사이트와 해당 flex를 연습할 수 있는 사이트를 추천하는 구성을 하였습니다. 이번 시간에는 Flexbox Layout에 대해서 알아볼 것이다. 지난 시간에서 우리는 display 속성들에 대해서 알아보며 inline-block는 문제점이 있다고 했다. 만약 div 태그 5개가 inline-block으로 지정되어 있다고 생각해보자. 우리는 배경 색으로 wheat을 주고 300 px로 스타일링을 했고, 화면에는 다음과 같이 나왔다. 일단 문제점이 좀 보인다. 우린 div 사이에 간격을 띄우지 않았는데 간격이 생겼다 우린 5개의 div를 .. 2020. 10. 4.

[CSS] CSS Display 속성 (block, inline, inline-block) 오늘은 CSS의 Display 속성에 대해서 알아볼 것이다. Display 속성은 정말 간단하니 쉽고 빠르게 알아보자. Display display 속성은 HTML 요소를 어떻게 보여줄 것인지를 결정한다. 주로 4가지 속성이 쓰이는데, 각각의 태그마다(div, p, a, span) 기본 값이 다르다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inline-block : block과 inline의 중간 형태 none 요소를 렌더링하지 않도록 설정한다. 이게 조금 재밌는게, display를 none으로 설정하면 화면을 아예 차지하지도 않는다. block block은 width 영역을 모두 100%로 채우며 block 다음에 등장하는 태그는 줄바꿈이 된 것 처럼 보인다. b.. 2020. 10. 4.

이전 1 2 3 4 5 다음

티스토리툴바