THE 나은 웹사이트

1. flex-shrink flex된 item요소에 flex-shrink라는 속성을 줄 수 있다. flex-item 요소의 크기가 flex-container(flex를 준 부모요소)의 크기보다 클 때 flex-item의 크기를 줄일 때 사용한다. flex-shrink의 속성값으로는 숫자가 들어가며 음수는 쓸 수 없다. flex-container에 flex-wrap : wrap 속성을 준 경우 flex-shrink는 적용이 되지 않는다. flex-shrink의 디폴트 값은 1이므로 flex-item의 크기가 자동으로 축소된다. 그러므로 flex-item의 크기가 줄어들지 않는 것을 원한다면 flex-shrink값을 0으로 적어준다. item의 width값을 합치면 container의 width값보다 크지만..

웹 페이지를 만들고 코드를 작성하면 그 코드들이 박스형태로 웹브라우저에서 보여지게 된다. 웹의 디자인에 따라서 몇개의 박스는 가로로 배치하고 싶을 수도 있고 세로로 배치하고 싶을 수도 있을 것이다. 이걸 도와주는 css속성이 있는데 display이다. 이 display중에서도 속성값으로 flex를 이용하면 된다. *{ box-sizing: border-box; margin:0; } .box-wrap{ margin-left: 40%; margin-top: 10%; } .blue-box{ width:100px; height:100px; background-color: #293462; } .red-box{ width:100px; height:100px; background-color: #F24C4C; } .y..

1. Color Paletts https://colorhunt.co/ Color Palettes for Designers and Artists - Color Hunt Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects. colorhunt.co 여러가지 색깔들의 헥스코드를 카피할수 있는 사이트이다. 서로 어울리는 색깔들을 추천해서 색깔 조합이 어렵다 하는 사람들에게 도움이 된다. 2. Google Fonts https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and o..

웹사이트를 꾸미다 보면 요소에 맞게 다양한 폰트로 바꾸고 싶은 생각이 든다. 오늘은 폰트를 바꾸는 방법에 대해 알아보자 우선 폰트를 바꿔줄 사이트 하나가 필요하다. https://fonts.google.com/ 라는 곳인데 구글에서 다양한 폰트를 제공해준다. 1. 이곳에 들어가서 마음에드는 폰트를 하나 골라준다. 2. 마음에 드는 폰트를 골랐다면 폰트의 굵기를 정해서 select this style을 누른다. 눌렀다면 요런 페이지가 옆에 뜰건데 태그로 되어있는 저 코드들 중에 하나만 복사해서 html파일 head쪽에 붙여넣기 해주고 link밑에 보면 CSS rules to specify families 라는게 있는데 이 font-family를 폰트를 바꾸고 싶은 요소의 css에 붙여넣는다. 여기까지 하면..

1. background-image 속성? 요소의 배경이미지를 한 개 또는 여러 개 설정해주는 속성 2. 배경 이미지 파일 불러오기 background-image 속성값중 url( )이 있는데 괄호안에 이미지 파일의 절대경로나 상대경로를 적어준다. 배경 이미지를 여러 개 설정해주고 싶다면 ','를 통해 url을 여러개 가지고 온다. 3. 배경 이미지 크기 조정 background-size 속성을 사용한다. 속성값으로 px,em,%을 이용하여 width와 height값을 직접 설정할 수도 있고 contain과 cover라는 속성값을 사용할 수도 있다. contain은 이미지 전체가 보여지도록 설정해주고 배경이미지가 들어가는 요소의 크기에 따라 꽉 채워지지 않을 수 있다. cover는 요소를 다 덮을 수 있..

1. box-sizing이란? css의 속성중 하나로 요소의 너비와 높이를 계산하는 방법을 지정한다. 속성값으로 content-box와 border-box를 가진다. 2. content-box content-box는 콘텐츠 영역을 기준으로 width와 height값을 결정한다. padding 또는 border를 설정해준 경우 content 위에 더해지는 형식이다. 요소의 width(100px) + border 좌우(2px) = 전체 width(102px) 요소의 height(100px) + border 상하(2px) = 전체 height(102px) 3. border-box border-box는 content-box와 다르게 border,padding도 요소의 크기로 고려한다. 박스의 width값, he..

1. CSS를 적용하는 여러가지 방법 (1) inline css html 태그에 style속성을 이용해 직접 지정해주는 방법. 1 (2) internal css html 문서에서 head태그안에 style태그를 넣어 스타일을 지정해주는 방법. (3) external css 외부 css파일을 html문서에 link를 통해 연결해주는 방법 -- 마크업과 스타일을 구분짓기 위해 external방식을 가장 많이 사용한다. -- css 적용방법 우선순위 inline > internal > external 2. CSS 적용 우선순위 속성값 뒤에 !important -- 1순위 inline style -- 2순위 id 선택자 -- 3순위 class 선택자, pseudo class(:first-child 같은) -- ..

html 태그를 작성하거나 css를 작성하고 웹브라우저에 내가 작성한 코드들을 볼 때 가끔 어떤 브라우저에서는 내가 의도한 대로 나타나지 않는 경우가 있다. 그 이유는 브라우저별로 지원할수 있는 태그들, 없는 태그들, 속성들이 존재하기 때문이다. 사용자들은 다양한 브라우저를 사용하고 있고 웹 개발을 할때 이를 고려해 코드를 작성하는 것이 중요하다. 브라우저별로 지원하는 태그들, 속성들을 확인해야 하는데 이것들이 유효하게 작동하는지를 알려주는 사이트가 있다. caniuse.com이라는 사이트인데 이런 식으로 Can I use 뒤에 써야 하는 태그들이나 속성들을 적으면 브라우저별로 지원하는 항목들이 나온다. 초록색으로 표시된 부분은 '지원' , 빨간색 부분은 '지원하지 않음' , 노란색 부분은 '일부지원',..

1. img태그란? img태그는 문서에 이미지를 삽입할 때 사용한다. 2. img태그 사용방법 img 속성값은 대표적으로 src와 alt가 있다. src 속성은 필수이며 이미지의 절대경로 또는 상대경로를 적어준다. alt의 경우 이미지를 제대로 불러오지 못했을 경우의 대체 텍스트이며 이미지를 설명하는 내용을 적어준다. -- 절대경로와 상대경로 절대경로 : 절대적인 위치를 가리키는 경로, 컴퓨터의 디렉토리에서는 C:\ 를 포함, URL에서는 http:// 를 포함 상대경로 : 작업 디렉토리를 기준으로 상대적인 위치를 가리키는 경로 절대경로의 경우 보통 외부 이미지 파일을 가져올 때 사용하고 상대경로는 내부 이미지 파일을 가져올 때 사용한다. 상대경로를 사용할 때 이미지를 삽입할 문서를 기준으로 이미지가 상..

1. class와 id를 쓰는 목적 class와 id는 특정한 요소에 스타일을 입히기 위해 사용되거나 자바스크립트 파일에서 class값이나 id값으로 html태그를 불러오기 위해 사용된다. 2. class와 id선택자 사용방법 class의 경우 html문서에서 class = "클래스 이름"을 작성해준 다음 css파일에서 클래스이름 앞에 .을 붙여준다. id의 경우 html문서에서 id = "아이디 이름"을 작성해준 다음 css파일에서 아이디 이름 앞에 #을 붙여준다. .클래스 이름{ font-size : 14px; font-weight : 600; } #아이디 이름{ background-color : blue; } 3. class와 id의 차이점 (1) class는 class 이름을 공백을 통해 여러개 ..