본문 바로가기

전체 글127

[html/css] Box-sizing 속성 box-sizing 속성 box-sizing 속성은 컨텐츠 영역에 border와 padding 을 포함시켜주는 속성이다.보통 css box model을 계산할 때 width + (padding*2) + (border*2) + (margin*2) 라는 공식으로 계산하지만,box-sizing 속성을 이용하면 padding과 border를 컨텐츠영역(width/height)안에 포함시켜주어 계산하기 쉬워진다.box-sizing : content-box; ★★★box-sizing : border-box;  속성을 활용하기 전, div에 속성을 부여하여 기본 틀을 만들어 주겠다.   box1과 box2에 각각 다른 속성을 부여하여 차이를 확인해보자. 1. content-box 일 때, 부여하지 않았을 때와 마찬가.. 2024. 6. 3.
border 보더의 두께는 절대 상대단위 쓰지 않는다, 절대단위 씀.border none 초기화할때 쓴다. 이미지 태그에서도 쓰는데 옛날 익스플로러에서는 이미지에 보더가있었다.보더는 패딩이나 마진처럼 위아래 양옆 같이 적용하는 것이 없다. 적용하고 싶으면 상하좌주 다 따로 써줘야한다.  https://han288.tistory.com/40 Emmet CSS3 float left, div 태그 여러개 한번에 코딩하는 유용한 단축키, 스타일시트 적용 방법아톰에서 HTML5, CSS3 작성 중 레이아웃을 잡기 위해 float을 자주 사용하게 됩니다. float:left 자동 완성 단축키 ffl 3단어를 넣고 탭 키를 누르게 되면 float:left가 자동 완성이 됩니다. div 태그 여러개han288.tistory.com.. 2024. 5. 31.
티스토리 꾸미기 https://hotsunchip.tistory.com/9 [티스토리] 자동 목차 생성 방법 (기존 문제 해결)웹 개발의 가장 처음이 티스토리 관련이라니 살짝 아쉽긴 하지만, 개발 블로그로 거듭나기 위해서는 꼭 필요한 작업이었으므로.. 또 기존 방법이 가지고 있던 문제도 해결했으므로... 만족... 아hotsunchip.tistory.com https://fromitot.tistory.com/40 티스토리 블로그 목차 만들기 (부드러운 스크롤, 목차 따라오기, Tocbot)필자가 조사한 바에 따르면 티스토리 블로그에서 목차 (내부링크, TOC - Table Of Contents)를 만드는 방법은 HTML모드로 들어가 코드를 건드리는 것뿐이다. 그러므로 필자를 포함한 초심자들은 목차를fromitot.tis.. 2024. 5. 31.
[html/css] div 속성 공간을 나누는 div 태그div 태그는 웹페이지에서 레이아웃을 만들 때, 주로 사용하는 태그이다. block 속성의 대표적인 태그로 너비, 높이를 지정하지 않으면 브라우저의 전체 너비를 차지한다.block 속성의 너비 높이와 여백을 주고 싶을때에는 CSS BOX MODEL이라는 개념을 알아야 한다.CSS BOX MODEL: block 속성을 가진 모든 태그들은 박스의 형태를 가지고 있다.css를 통해 가로, 세로의 크기를 정하여 형태를 만들고 여백 및 배치 형태를 설정해 원하는 위치에 배치한다.이러한 박스 형태를 가진 요소를 스타일 시트(css)에서는 'CSS BOX MODEL'이라고 부른다. div 파일을 만들어 직접 보면서 속성을 파악해 보도록 하겠다.내용 현재 div 태그는 투명한 빈 박스 상태이다.. 2024. 5. 31.
Text Field 텍스트 필드 제작하기 Text Field 만들기 https://yerica.tistory.com/33 Figma - Auto layout / 피그마 - 오토 레이아웃Auto layout(오토 레이아웃)이란?반응성과 유연성이 뛰어난 동적 레이아웃을 만들 수 있는 기능이다. 기본적으로 프레임 속성이 포함되어 있다.프레임 내부 구성 요소들의 배열 방향, 간격, 패딩,yerica.tistory.com이와 같은 방법으로 텍스트 필드(text field)도 만들어보려고 한다.'검색어를 입력하세요.' 라는 글을 작성한 뒤 오토레이어를 만들어준다.* 텍스트 상자에 미리 적혀있는 문자를 '플레이스홀더'라고 한다. 일반적으로 플레이스 홀더는 문자나 이미지 등의 요소가 들어갈 자리에 임시로 채워 놓는 내용물을 의미한다.프레임의 색을 흰색으로 변.. 2024. 5. 31.
[Figma] Auto layout / 피그마 - 오토 레이아웃 Auto layout(오토 레이아웃)이란?반응성과 유연성이 뛰어난 동적 레이아웃을 만들 수 있는 기능이다. 기본적으로 프레임 속성이 포함되어 있다.프레임 내부 구성 요소들의 배열 방향, 간격, 패딩, 정렬 등 다양한 옵션을 설정할 수 있다.내부 컨텐츠의 크기에 따라 프레임 크기가 자동으로 조정되게 설정하거나, 반대로 프레임 크기에 따라 컨텐츠의 크기를 조정되도록 설정할 수 있다.- 오브젝트를 선택한 상태에서 Shift + A- 프레임을 선택한 상태에서 Auto layout 패널의 추가(+) 아이콘 클릭하기- 프레임이나 오브젝트를 선택한 상태에서 마우스 우클릭 후 Add auto layout 선택 프레임을 선택한 후 우측의 Auto layout 패널이 뜨는 것을 확인할 수 있다.Individual padd.. 2024. 5. 30.

티스토리툴바