라몽(●'◡'●)디자이너

코딩/웹디자인에 대한 정보를 다룹니다.

코딩스터디/CSS

display: flex - 부모요소에 설정해서 자식 요소의 레이아웃 배치 방식을 지정 - 모든 자식 요소를 inline-block형태로 변경 flex-direction: flex상의 기본축을 지정 - row : 기본축을 가로로 지정 - column : 기본축을 세로로 지정 flex-wrap : 자식요소의 줄바꿈 유무 결정 - nowrap(디폴트) : 줄바꿈 하지 않음 - wrap : 줄바꿈 justify-content : 자식요소의 기본축 정렬방식 지정 - flex-start : 왼쪽방향 정렬 - flex-end : 오른쪽방향 정렬 - center : 가운데 정렬 - space-between : 양끝을 가장자리에 붙이고 사이간격을 균등배치 - space-around : 자식 요소의 좌우 여백을 양끝에도..

2021. 6. 29.

코딩스터디/CSS

파비콘(favicon) 이란? - 파비콘은 favorite + icon = favicon을 뜻하며, 웹사이트의 대표아이콘을 말한다. 파비콘 설정하는 방법(HTML) - 태그에 파비콘 파일의 경로를 지정해주면 된다. - vscode에서 파비콘코드 단축키는 : link:favicon.ico 엔터 파비콘 만드는 법 - 파비콘 사이즈(favicon size)는 16px x 16px 이 제일 최적화된 사이즈이고 공통적으로 보여지는 사이즈 - 더 커지면 용량이 커져서 좋지 않습니다. 1. 직접 파비콘 만들기 2. 폰트어썸 사이트에서 아이콘 svg로 다운받아서 피그마(figure) 에서 사이즈 조절 - 폰트어썸에서 옆 다운로드 아이콘클릭 -피그마는 사이트 무료가입후 새파일에서 svg아이콘 불러오기 https://ww..

2021. 6. 18.

코딩스터디/CSS

data속성 - 사용자 정의 데이터 속성을 지정 - 일반적으로 JavaScript에서 이용할 수 있는 데이터(정보)를 HTML에 저장하는 용도로 사용 ---> HTML에서 보관하고 있다가 자스에서 필요할 때 활용 가능 - data-*에서 data-*이후 *부분에는 원하는 명칭을 지정할 수 있음. /* 사용법 */ data-"속성의 이름" 사용예시 [블로그 참고] https://blog.naver.com/webdeveloping/222214753103 [HTML] 전역 속성(5) - data ▶ data-* ● 사용자 정의 데이터 속성을 지정. ● 일반적으로 JavaScript에서 이용할 수 있는 데이터(정... blog.naver.com https://blog.naver.com/goqkfkrl0108/2..

2021. 5. 29.

코딩스터디/CSS

clip-path 속성 - 요소의 클리핑 범위를 지정합니다. - Clipping이란, 이미지의 일부영역을 지정해 일부분만 보이게 하는 display 기술 Clipping 효과를 적용하기 전에, 먼저 이 효과를 적용할 이미지들부터 나열합니다. (이미지는 img를 넣든 bgimg 로 넣든 상관없음) 1. 정원 클리핑하기 clip-path는 도형모양의 클리핑을 하는 속성 값은 circle(반지름 at 가로위치 세로위치), 위치값은 center, left, right 값을 쓸 수도 있습니다. /* 1. 정원 클리핑하기 */ .box1::after { clip-path: circle(0% at 50% 50%); } .box1:hover::after { clip-path: circle(40% at 50% 50%);..

2021. 5. 3.

코딩스터디/CSS

css filter 속성 흐림 효과나 색상 변형 등 그래픽효과를 요소에 적용 보통 필터는 이미지, 배경 테두리 렌더링을 조정하는 데 쓰입니다. filter 값 filter : blur(5px); /* 흐림도 결정 */ filter : brightness(0.4); /* 밝기 결정 */ filter : contrast(200%); /* 명암대비 결정 */ filter : drop-shadow(16px 16px 20px blue); /* box-shadow와 같은 값 */ filter : grayscale(50%); /* 흑백화하는 속성 */ filter : hue-rotate(90deg); /* 색상을 변경 */ filter : invert(75%); /* 색상과 명암을 한번에 반전 */ filter : ..

2021. 5. 1.

코딩스터디/CSS

1. transform [변형] : 객체를 변형하는 속성 : 요소에 회전, 크기 조절, 기울이기, 이동효과를 부여함 transform으로는 아무리 모양을 변형해도 자신의 고유축은 절대 변경불가 [2차원 변형과 3차원 변형] - 2차원 변형은 단순히 수평이나 수직으로 이동하고 회전하는 것 - 3차원 변형은 z축을 추가해 원근감을 주는 것 transform과 변형 함수 transform : 변형 함수; 이미지를 회전시키거나 이동하는 등 변형하려면 transform 속성을 사용해야 합니다. translate 변형 함수 - 요소 이동시키기 - 이 함수는 2차원과 3차원에서 모두 사용가능한 함수입니다. transform : translate(x, y); transform : translate3d(X, Y, Z) ..

2021. 4. 22.

코딩스터디/CSS

form 태그 - form 요소는 사용자가 입력하거나 선택한 정보를 서버로 전송하기 위해서 쓰는 태그 - 사용자 입력을 위한 요소로 사용자로부터 정보를 수집하는 역할 (form태그는 웹페이지에서 로그인 폼, 회원가입 폼 등에서 이용됨) 1. form 태그 속성 - 폼 태그 속성에는 name, action, method, target 등이 있습니다. action - 폼 전송 버튼을 눌렀을 때 이동하는 페이지의 경로를 지정 - 정보를 건네받는 곳을 지정하거나 선택한 정보를 서버로 전송하기 위해서 쓰는 태그 name - 폼을 식별하기 위한 이름을 여기에 작성 - 입력 태그의 이름(서버로 전달될 때 이름에 값을 붙여서 전송) accept-charset - 폼 전송시 사용할 문자 인코딩을 지정 (즉 한국어나 영어..

2021. 4. 20.

코딩스터디/CSS

태그 -테이블은 게시판, 데이터 관리 할 때 유용하게 쓰입니다. -테이블은 기본적으로 줄(행 rows)과 칸(열 column)으로 구성되어 있습니다. 1. 테이블 기본태그 태그 : table row 테이블에서 하나의 줄에 해당하는 행(row) 을 정의하는 태그 태그 : table data 테이블에서 데이터가 표시되는 표준 셀을 정의하는 태그 - 반드시 태그 내에서 사용 - 셀 내용 > 왼쪽 정렬로 표시 태그 테이블 전체에 해당하는 제목을 표시 - 테이블 레이아웃에는 아무런 영향을 미치지 않음 - 반드시 시작 태그의 바로 다음에 위치 - 과 태그 사이에 다른 어떤 태그도 위치 불가 - 또는 태그 내에서 사용하면 무시 - caption 태그를 쓰면 숨겨주기 ex) .h { position: absolute;..

2021. 4. 20.