본문 바로가기

분류 전체보기

 (153)
반응형을 만들 때 많이 사용되는 상대 단위 반응형을 만들 때 많이 사용되는 상대단위 1. %: 어떤 영역에서 어떤 %만큼의 영역을 차지함. (부모박스의 반 채우고 싶으면 50% 또 그 안에 반 채우고 싶으면 50%)2. vw, vh: view port width / view port height의 약자로 보이는 화면을 기준으로 백분율(%)하여 적용한다. (영역이 기준이 아니라 보이는 화면이 기준)3. vmin, vmax: view port의 최대, 최소 넓이를 의미한다. vw와 vh를 합친 단위로 vmin은 vw와 vh중 작은 값을 기준으로 하며  vmax는 vw와 vh중 큰 값을 기준으로 한다. 핸드폰에서 많이 사용. min은 작다, max는 크다.
[CSS] dispaly: flex;> 자식박스에 주는 속성들 / order, align-self 단축문장- div 글자는 안써도 된다. 바로 .으로 시작해도 된다.  $는 숫자  / .뒤에는 클래스 이름 / > 안에 라는 뜻 ★ 아래 속성들은 반드시 자식박스에 적용하는 속성들입니다 ★  ★ 부모박스에 dispaly: flex; 가 적용되어 있어야만 사용할 수 있다. ★dispaly: flex; 는 자손한테만 전달된다. 직접적인 부모박스에 줘야함      : 자식박스의 순서 변경 속성    order를 통해 flex 안쪽에 자식 요소의 순서를 바꿀 수 있다.  기본값은 0이며, 양수나 음수로 바꿀 수 있다. 작은 수일수록 나열 순서가 앞으로(왼쪽) 온다. 숫자가 클수록 오른쪽에 나열된다. 반응형을 작업할때 사용한다. : 개별 요소 세로 정렬 속성 자식박스를 개별적으로 세로로 정렬할 때 사용하는 속성 ..
[CSS] display: flex; > align-content, gap 단축키 익숙해지자.  div>안에 div. : 컨텐츠의 줄을 정렬하는 속성 / 세로(align)flex된 컨테이너(부모박스)안에 자식들이 매우 많을 경우 여러 줄이 형성된다. 이때 한 줄을 하나의 content로 본다. 그래서 속성 이름이 align-content이다. 이 속성은 컨텐츠들을 각각 세로로 정렬하고 요소 사이에(between), 주위에(around)에 동일한 간격을 주어 배치할 수 있다.  - align-content: flex-start; : 여러 줄들을 컨테이너(부모박스)의 top위치에 배치- align-content: flex-end; : 여러 줄들을 컨테이너(부모박스)의 bottom위치에 배치- align-content: center; : 여러 줄들을 컨테이너(부모박스)의 middle..
피그마-아이콘2/ 컴포넌트 플러그인에서 필요에 따른 것들을 다운 받을 수 있다. 플러그인에서 아이콘을 다운 받은 후, 스트록 형태로 되어있기때문에 선을 면으로 만들어놓고 써야 한다. 백터들 같이 잡아서 위에 union selection 하거나 우클릭 - outline stroke 클릭해서 면으로 만들어준다.  각각 컴포넌트로 저장해준다.컴포넌트 해주고 싶은 것들을 한꺼번에 잡아서 create multiple components 를 해주면 각각 컴포넌트로 한번에 바꿔줄 수 있다. 컴포넌트화하고 이름 바꿀 때 첫글자는 대문자로 적어주고(규칙이다) / 를 사용해서 폴더화 시켜준다. Assets에서 확인할 수 있다.  아이콘은 배리언츠(아이콘에 대한 옵션들을 하나의 컴포넌트로 등록해놓은 것/ 옵션을 설정해놓은 것)를 사용하지 않고 각각의..
[CSS] display: flex; > align-items 자식박스 하위 세로 정렬, flex-direction, flex-wrap, flex-flow display: flex;를 먼저 부모박스에 쓰고 justify-content / align-items / flex-direction / flex-wrap / flex-flow 를섞어서 쓸 수 있다. : 부모박스 안에서 세로로 자식박스를 정렬하는 속성align items를 사용하면 부모박스 안에서 자식 박스를 세로로 정렬할 수 있다.이때 '세로'는 부모박스에서 top에 위치하느냐, middle에 위치하느냐,bottom부분에 위치하는 가를 뜻한다.★부모박스에 적용한다.display: flex; 주고나서 align 적용해야한다. / justify-content(가로로 정렬하는 속성)등 하위 정렬속성들과 같이 쓸 수 있다.  - align-items: flex-start; : 기본값으로 부모박스의 top 부분..
피그마- 컴포넌트 컴포넌트: 반복적으로 사용되는 요소를 재사용하기 위해 사용하는 기능 피그마에서 컴포넌트는 디자인 전체에서 재사용 할 수 있는 요소로 정의된다. 작은 요소인 버튼이나 아이콘부터 레이아웃 전체에 이르기까지 다양한 범위에서 사용할 수 있다.핵심은 컴포넌트의 '재사용성'에 있고, 반복해서 사용되는 요소들은 컴포넌트로 만들어 관리하면 효율적이고,모든 요소를 한번에 편집할 수 있어 유지보수가 쉽다. : 가장 먼저 생성한 컴포넌트를 메인 컴포넌트.메인 컴포넌트로부터 복사된 컴포넌트인 '인스턴스 컴포넌트'의 기본 속성을 정의하는 역할을 한다. 디자인에 직접 사용되지 않고 별도의 페이지에서 관리하는 것이 일반적이다. 그 이유는 메인 컴포넌트를 디자인에 직접 사용하게 될 경우, 메인 컴포넌트와 인스턴스 컴포넌트를 헷갈려 ..
[CSS]★ dispay / display: flex; > justify-content 자식박스 하위 가로 정렬 ★      dispay는 '보여주다'라는 의미로 블록 요소와 인라인 요소의 특징을 바꿀 때 사용한다.   - dispay: block; 해당 요소를 block 속성으로 바꾸거나 dispay none으로 숨긴 요소를 다시 나타나게 한다.- dispay: inline; 해당 요소를 inline 속성으로 바꿈- dispay: inline-block; 해당 요소를 inline-block 속성으로 바꿈- ☆ dispay: none; 해당 요소와 영역을 모두 표현하지 않음(숨김)반응형할때 많이 쓴다. 어떤 요소를 숨겼다가 다시 나타나게 할 때 사용( 마우스 올리면 기존에 있던 사진을 숨기고 다른 사진을 나타날때 사용) 인라인 속성과 블럭 속성의 형태/블럭속성은 브라우저의 전체 여백을 차지하는 것을 볼 수 있다. ..
[CSS] 기초 배치 float, clear / 중첩 박스 ★ margin: (0)px auto; 을 적어주면 컨텐츠를 가운데로 배치할 수 있다. float 속성 >  텍스트박스도 배치 가능      float 속성은 사전적인 의미도 '떠오르다' '떠다니다'라는 의미를 가지고 있다. 웹 페이지에서는 float을 이용해 박스를 왼쪽이나 오른쪽으로 배치할 때 사용한다. 만약 배치하지 않을 경우 float: none; 속성이나 clear 속성을 이용한다. - float: left; : 박스를 영역의 왼쪽으로 배치한다. - float: right; : 박스를 영역의 오른쪽으로 배치한다. - float: none; : 박스를 배치하지않음 clear 속성 >float이 적용된 박스는 해당 위치로부터 살짝 떨어지게 된다.(브라우저부터 컴퓨터 뒤로 살짝 떨어지게 된다) 아래에..
[CSS] box-sizing / 레이아웃 예제 실습 ★       css box 모델을 계산할 때 보통 width + (padding*2) + (border*2) + (margin*2) 이런 공식으로 계산을 하지만, box-sizing 속성을 이용하면 padding 영역과 border 영역을 컨텐츠 영역(width/height)안에 포함 시켜준다.          - box-sizing : content-box; : 기본값으로 padding과 border를 컨텐츠 영역에 포함시키지 않음 ★ - box-sizing : border-box;: 컨텐츠 영역 크기안에 padding과 border를 포함시킨다.  내가 지정한 넓이 안에 padding과 border를 포함시켜 만들어준다.  대부분의 box는 이 속성이 들어간다. 쓰는 걸 습관화하자 box-sizi..
[html] [CSS] 레이아웃 기초/ div공간, vs code 단축 문구, border테두리, border-radius둥근 테두리 vs code 비주얼스튜디오 코드 단축문구  - div 10개 만들고 싶을 때 : div*10 - class가 있는 div를 10개 만들고 싶을 때 : .클래스명*10 - class가 있는 다른 태그를 n개 만들고 싶을 때 : 태그명.클래스명*n  ex) li.menu*5 하면 가 5개 생긴다 - ul 안에 li 8개 넣고 싶을 때  ul>li*8 - p태그 안에 lorem ipsum 기본문자를 넣고 싶을 때  p>lorem     -자동번호 넣기(순차적 번호가 할당됨) 태그명.클래스명 $ {내용}*n 태그 해당 클래스명에 숫자를 오름차순으로 할당하고 내용 뒤에 숫자를 붙여 함께 할당함본문 안에는 제목이 들어가지않는다. 본문 안에 제목을 넣고 싶으면 div를 또 넣어준다.  [ width와 height ..

티스토리툴바