IT_susu

쿠키나 스토리지는 전부 저장소입니다. 키, 밸류 형태로 저장할 수 있습니다. 쿠키는 각각 4kb, 스토리지는 모바일은 2.5mb, 데스크탑은 5mb~10mb로 브라우저마다 다릅니다. 50mb까지 저장할 수 있는 indexedDB도 있다고 하네요. 스토리지는 두 종류로 더 세분화되는데, 로컬스토리지는 영구적인 스토리지(사용자가 삭제하기 전까지), 세션 스토리지는 사용자가 브라우저를 끄기 전까지 유지되는 저장소입니다. 용량의 차이 외에도 둘의 큰 차이점은 서버와 통신하는가 여부입니다. 쿠키는 처음 만들어질때부터 서버와의 통신을 하도록 의도되었습니다. 서버가 http요청만으로는 누가 나에게 요청했는지 모르기 때문에 그 정보를 쿠키에 담아 보내줬던 것이죠. 이에따라 쿠키는 서버의 데이터를 계속 사용하게되어 데이..

normalDefault value. Sets the content, if specified, to normal, which default is "none" (which is nothing)Try it »noneSets the content, if specified, to nothingTry it »counterSets the content as a counterTry it »attr(attribute)Sets the content as one of the selector's attributeTry it »stringSets the content to the text you specifyTry it »open-quoteSets the content to be an opening quoteTry it »c..

blockquote - 블락요소 인용문q - 인라인 요소 인용문cite - 출처, 발언자 따옴표로 대체 가능함.

목록에도 여러 종류가 있습니다.순차적 목록인 ol-li비순차적 목록인 ul-li설명 목록인 dl-dt-dd ol 혹은 ul과 li사이에는 다른 요소가 오면 안되며,li안에는 여러가지 태그가 올 수 있습니다. 설명목록은 dl로 감싸고 그 안에 몇개의 dt, 몇개의 dd가 있을 수 있습니다.

페이지 내 링크를 이동하는 앵커와 다른페이지로 이동하는 하이퍼링크에 대해 알아봅시다.html태그에서 a태그는 다른 곳으로 이동하는 태그입니다. 이는 문서간의 연결을 가능하게 하여 하나의 문서가 아닌 여러개의 문서를 넘나들며 볼 수 있게 되었습니다. 이때 다른 문서의 경로를 적어야 그 주소대로 찾아 연결이 가능할텐데요.경로에는 3가지가 있습니다. 1. 절대경로url로 이루어진 웹사이트의 리소스 위치 경로.https: // tistory.com/admin/entry scheme : https://domain : tistory.compath : /admin/entry : 폴더 경로2. 상대경로현재 문서를 기준으로 상대적으로 다른 문서가 존재하는 위치를 설정ex) ../../img/1.header/backgro..

멀티미디어 콘텐츠를 담아봅시다. 1. img이미지를 담는 태그. 정말 많이 사용되겠죠? 이미지를 불러온 후, 크롬 개발자도구 network창을 열어보면 이미지가 따로 로드되는 것을 볼 수 있습니다.이미지는 html파일 안에 포함되지 않고 링크로 연결되어 따로 불러와지는 것이며,이렇게 하는 이유는 전체 로드시간을 줄이기 위함입니다. 이미지의 종류는 gif - 간단한 애니메이션을 만들때 좋으나 색이 다양하진 않다. 투명처리도 png보다는 퀄리티가 떨어진다.png - 투명처리에 탁월해서 로고나 아이콘에 좋음. 그러나 사진을 처리하기엔 용량이 크다.jpg - 사진 처리에 최적화되어 있음. 색도 다양하고 압축률도 좋음.svg - 위의 세개는 비트맵 형식이나 svg는 벡터 형식이므로 크기조정에도 이미지 깨짐이 없음.

html 태그의 종류를 나누는 것은 html이 어떤 컨텐츠들을 담을 수 있고, 어디까지 기능을 할 수 있는지를 가늠하는 척도와 같습니다. 첫번째, 컨텐츠의 고전! 텍스트를 담는 태그를 알아봅시다. 1. heading 태그h1~h6h1은 한 번만 사용중요도를 알려주며 문서의 구조를 나타냄. 2. paragraph 태그단락을 나눔. 3. br태그라인 브레이크. 줄바꿈에만 사용하며 단락을 구분하겠다고 br을 여러번 사용하는 것은 금지한다.오류가 나는 것은 아니지만 의미에도 맞지 않고, 예전 사용방식이며 그런 경우는 p로 감싼다.

글자 및 inline요소는 우리가 생각하는 높이와 다르게 동작한다.따라서 속성명도 height이 아니라 line-height이다. 1. 타이포그래피 이론 2. 글자크기의 높이 설정하기라인의 높이, line-height는 위의 그림과 같이 영역을 차지한다. 즉, font-size + leading영역의 합이다.leading영역을 없애고 싶다면 line-height: 1;font 자체에 지정되어있는 여백을 없애는 기능은 없으며, 억지로 line-height을 1보다 적은 수로 줘서 눈대중으로 맞출 수는 있다.단, font-family가 달라지면 바뀐 폰트의 여백은 또 다르게 설정되어 있을 것이므로 line-height를 다시 맞춰야 한다. 3. inline요소의 높이 설정하기2번 주제와 같이 여백 하나 없이..

main-sidebar 구성 아래 예시처럼 sidebar와 main이 서로 간섭하지 않고 독립된 영역으로 분리하는 것을 의미한다.이 설계의 장점은 main과 sidebar의 너비를 지정하지 않아도 레이아웃이 틀어지지 않는다. (예시사진 준비) [결과]

flex와 grid