계발하는 개발자

반응형 웹페이지 제작에 많이 쓰는 사이즈 단위인 rem, em에 대해 알아보겠습니다. 보통의 정적인 요소들에 폰트사이즈를 고정크기인 px(픽셀) 단위로 설정하는 게 일반적이지만, 화면 크기 배율에 따라 상대적인 폰트값을 적용하려는 경우가 생기기 마련입니다. 이때 사용하는 것이 rem, em 되겠습니다. 여기서 1.5em, 1.5rem은 각각 1.5배 해주는 것이라 보시면 됩니다. 앞서 '화면 크기 배율'에 따라 상대적인 크기값을 준다고 정의했는데요, 어떤 것이 배율의 기준이 될까요? 어떤 요소의 1.5배를 말하는 걸까요? 이에 대해 rem과 em은 서로 다른 특징을 지닙니다. rem은 문서의 최상위 부모인 html을 기준으로 배율값을 지정해주는 크기 단위입니다. rem의 뜻은 최상위를 뜻하는 root의 ..

용어 목록을 만드는 dl,dt,dd 태그에 대해 알아보겠습니다. 태그는 definition list(정의 목록)의 약자로, 사전처럼 용어를 설명하는 목록을 생성할 때 사용합니다. -> 이후에 나오는 ,태그를 감싸주는 최상단 태그 역할을 합니다. 태그는 definition term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용합니다. 태그는 definition description(정의 설명)의 약자로, 정의되는 용어를 설명할 때 사용합니다. 위 태그들의 전체적인 레이아웃을 보면 아래와 같은 모양이 나옵니다. 용어 제목 용어 설명 html 코드 더보기 분야별 뉴스 경제 지난해 대기업 된 중견기업 205개…실적·고용·투자 증가 기업 1인당 노동비용 월 585만원…전년대비 8.2% 증가 사회 가..

앞서 정리한 relative,absolute 속성에 이어 position 2편입니다. position 각 속성과 정의는 앞선 장에 자세히 설명되어 있으니 이번 장에서는 제외하겠습니다. ↓↓ 앞장 내용은 이전 포스팅 참고 ! [CSS] position: relative, absolute 속성(1) (3) position: fixed - 실습 예제 먼저 fixed는 요소를 일반적인 문서 흐름에서 제외하고, 지정된 위치에 고정시키는 속성입니다. 일반적인 문서 흐름에서 제외된다는 말은 앞서 배운 absolute 속성과 비슷하나, 지정된 위치에 착! 고정시키는 것은 fixed 만의 고유한 특징이니 잘 기억해두시기 바랍니다. 첫번째라고 여러 번 쓰인 div, pos 라는 클래스명을 가진 div, 두번째라고 여러 번..

[ position 정의 ] position은 문서 상에 요소를 배치하는 방법을 정의하는 속성입니다. position이 요소의 배치 방법(너비, 높이값을 통한 정적인 위치 지정)을 결정하면, top, bottom, right, left가 상대적인 최종 위치를 결정하는 방식입니다. 더보기 position: 난 이렇게 배치할거야; top: 윗면에서부터 얼만큼 떨어뜨릴거야; right: 오른쪽면에서부터 얼만끔 떨어뜨릴거야; bottom: 아랫면에서부터 얼만큼 떨어뜨릴거야; left: 왼쪽면에서부터 얼만큼 떨어뜨릴거야; => 상하좌우 위치 지정은 필요에 따라 선택적으로 사용!(4개 속성 모두 필수 지정해야하는 것은 아님) [ position 속성 ] - position 속성에는 다음 속성값들을 지정할 수 있습니..