코딩 맛집

1. flex-wrap : nowrap 기본적으로 display : flex를 설정한 Container는 flex-wrap: nowrap 이 기본값으로 items 들을 한줄로만 나열 합니다. 2. flex-wrap : wrap flex-wrap : wrap 속성을 Container에 적용하면 item 들의 총 폭이 Container 폭보다 크면 item은 아래로 넘치게 됩니다. 3. flex-wrap : nowrap 인 경우 Container 의 크기가 설정되어 있다면? 아무 설정도 하지 않으면 flex-wrap : nowrap 속성이 기본값 입니다. nowrap이면 자식노드의 폭은 부모 노드의 폭의 맞춰서 줄어들게 됩니다. 4. flex-wrap : wrap-reverse wrap-reverse 를 설..

html 에서 수평으로 레이아웃을 구성 하기에는 쉽지 않습니다. 1. 수평으로 구성 하는 방법 1-1. display : inline-block 레이아웃을 수평으로 구성 하는 방법중에 하나는 노드들을 display : inline-block 으로 설정하여야 합니다. 하지만 display : inline-block 로 div 요소를 수평적으로 구성 했을 경우에는 1px 의 간격이 생깁니다. 1-2. float : left 수평 정렬을 원하는 요소들을 float : left를 주어 수평으로 만들어 줍니다. 하지만 float : left의 경우에는 노드들에게 떠있는 효과를 준것이기 때문에, float : left의 마지막 노드의 clear: both를 걸어 주어야 합니다. clear: both를 주어야 flo..

1. favicon 이란? favicon 은 브라우저에서 title 왼쪽에 나오는 이미지로 해당 사이트나 어플리케이션에서 대표 되는 이미지 입니다. 파비콘을 사용 하지 않으면 크롬에서는 아래와 같은 지구 모양에 이미지가 나옵니다. 2. 크롬 favicon 에러 그리고 chrome 에서 favicon을 설정하지 않았다면 개발자 도구에서 다음과 같은 에러가 출력 됩니다. favicon.ico:1 Failed to load resource: the server responded with a status of 404 () 이 에러를 없애고, 브라우저 title 옆에 이미지를 달고 싶다면 아래와 같이 이미지를 link 태그에 입력해 주시면 됩니다. 호환에 신경쓰지 않고 간단하게 기본 설정만 하고 싶다면 위에 16..

여러줄을 한줄로 줄여야 할 경우가 있습니다. 이럴 경우 해당 영역 만큼 글을 자르고 아무 표시도 안해주면 그 글은 거기서 끝인줄 아는 경우가 있습니다. 따라서 글 끝에 '...' 을 표시 해주어 글이 뒤에 더 있다는 표시를 해주어야 합니다. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quidem harum illo iure architecto totam, deserunt porro nostrum consequatur amet eius cumque culpa asperiores impedit molestias reprehenderit at magnam officiis. 1. 글을 표시할 영역 만들기 먼저 글을 줄이기 원하는..

css 에서 특별한 기능이 숨겨져 있습니다. 알고 있으면 굉장히 유용한 기능 입니다. 바로 변수를 선언하고 호출 할 수 있습니다. sass나 scss를 사용 하지 않아도 말입니다. 1. 변수 선언 --(변수명) -- 대쉬 두개를 쓰고 뒤에 변수명을 붙여줘서 변수를 선언 할 수 있습니다. --main-background-color: red; 2. 변수 호출 var(변수명) 원하는 css 부분에 변수를 사용 하기 위해서는 var 함수를 호출하고 그 안의 파라미터로 '변수명' 을 넣어 줍니다. body { background-color: var(--main-background-color); } 3. 전역 변수 설정하기 전역 변수는 해당 페이지 안에서 모든 영역에서 해당 변수를 사용 할 수 있습니다. 지역 변수..

1. 시맨틱 태그 시맨틱 태그는 사용자가 아닌 브라우저와 개발자에게 그 태그의 의미를 전달 하는 것 입니다. 시맨틱 태그 중 태그는 그 영역이 웹사이트에서 헤더라는 의미를 전달 합니다. 태그는 웹사이트에서 하단 영역 이라는 의미 합니다. 대표적인 non-semanitc 태그는 , 태그 입니다. , 태그 대신에 를 사용해도 웹 사이트를 이용하는 사용자들은 전혀 차이점을 느낄 수 없습니다. 시맨틱 태그의 종류는 - article - aside - details - figcaption - figure - footer - header - main - mark - nav - section - summary - time 이렇게 존재 합니다. 1. figure 시맨틱 태그 figure 시맨틱 태그는 img 태그와 그..

1. input 태그의 유효성 검사 데이터를 서버에 전송 하기 위해서 input 태그를 사용합니다. 그런데 서버에 보내기 전에 이 데이터가 서버에서 원하는 포맷과 일치 하는지 유효성 검사가 필요 합니다. 유효성 검사를 하는 방법은 여러 가지가 있습니다. javaScript 로도 많이 하지만, 이번에는 html5의 input 속성을 이용해서 해보려고 합니다. 2. required 속성 input 태그의 required 속성을 입력해 주면 submit 버튼을 누르기 전에 어떤 데이터가 입력되어 있어야 합니다. Username: 만약 데이터를 입력 하지 않고 submit 을 누르면 다음과 같이 출력 됩니다. 우리에게 생소한 속성인 만큼 크로스 브라우저를 확인해 봐야겠죠! Chrome - 5.0 IE - 10...

html에서 사용자 데이터를 입력 받을 때 input 태그를 사용 합니다. 1. input 속성들 type="text" : 문자를 입력 type="password" : 비밀번호 입력 type="button" : 버튼 type="submit" : form 데이터를 제출시 type="reset" : form 데이터 초기화 type="radio" : 라디오 버튼 입력시 type="checkbox" : 체크박스 입력시 type="file" : 파일 업로드 시 type="hidden" : 화면에 보이지 않는 숨겨진 요소 2. name 속성 name 속성은 서버로 보내질 이름을 입력 합니다. 3. input 태그와 함께 쓰이는 label 태그 input 태그는 label 태그와 함께 쓰여 input 의 설명을 보충..