전체 글 (137) 썸네일형 리스트형 css 알아보기 - 스타일과 css 스타일이 필요한 이유HTML 로만 웹 사이트를 작성하면 단순히 글, 그림 등이 나열된 문서가 됩니다.그렇게만 사이트를 만들면 예쁘지가 않죠배경색과, 글씨, 그리고 블록 배치등을 통해 꾸며줘야 평소에 사용하는 웹사이트가 됩니다.예를들어 네이버 사이트를 본다면위와 같은 페이지를이렇게 바꿔줄 수 있다는 거죠.간단하게 요약하자면, 스타일은 html로 정의된 문서가 실제로 표현되는 방법을 말합니다.그리고 이를 위해 우리는 css를 사용합니다. css 란?css 는 Cascading Style Sheets의 약자로,HTML 로 정의된 문서가 실제로 표현되는 방법을 정해주는 스타일 시트 언어입니다.HTML에 적용할 디자인을 따로 분리하여 적용해 놓을수 있으며, 이는 가독성에 도움을 줍니다.W3C에 의해 권고안이.. html 알아보기 - 시멘틱 웹과 div 태그 시멘틱 웹 이란시멘틱 웹이란, 각 부분에 메타데이터를 부여하여 웹 페이지에 의미를 부여하는 설계 방식입니다.쉽게 말하자면, 웹의 각 부분에 별명을 붙이는 방식이라 생각하시면 됩니다.그렇다면, 시멘틱 웹을 한다면 어떤 점이 좋을까요? 시멘틱 웹의 장점1. 시스템적 장점 스크린 리더스크린 리더란, 컴퓨터나 모바일 화면의 텍스트를 읽어주는 소프트웨어로, 주로 눈이 불편하신 분들이 사용합니다.시멘틱 웹은 스크린리더에게 푯말을 제공하여 탐색이 쉽도록 도와줍니다. 검색엔진마찬가지로, 검색엔진 또한 시멘틱 태그를 통해 상호작용할 수 있게 되므로, 효율성이 향상됩니다. 2. 효율성 향상시멘틱 웹은 직관적인 별명을 붙여주기 때문에, 개발자는 태그안에 채워질 데이터 유형을 추측할 수 있습니다.따라서 협업시, 또는 유.. html 알아보기 : 글씨 태그 - inline속성 태그 inline 속성이전의 block 속성을 가진 태그들은 작성 시 한 줄을 강제적으로 차지하게 됩니다.반면에, inline 속성 태그들은 자신의 크기만큼만 공간을 차지합니다.따라서, inline 속성 태그들은 여러개를 붙여서 사용할 수 있습니다. 태그span 태그는 공간을 의미하며, 자체적으로는 특별한 의미가 없는 태그입니다.단, 글에 스타일 또는 자바스크립트를 적용하고 싶을때 사용합니다. 예시코드 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium obcaecati ratione magni incidunt ipsa voluptatum cupiditate, te.. html 알아보기 : 글 태그 - 제목과 문단, preformat 태그 제목과 문단웹 사이트를 먼저 만들기 전에, 가장 기본적으로 사용하는것은 글 입니다.글은 제목과 문단으로 구성되어 있으며, 일정 형식으로 만들어지기도 합니다. 글의 제목 - 태그h 태그는 글의 제목(heading)을 의미합니다. ~ 까지 6단계로 구성되어 있으며, 각자 다른 크기를 제공합니다.가장 큰 제목은 을, 가장 작은 제목은 을 사용합니다.태그는 한 줄을 차지하는 속성(block)을 기본값으로 가지고 있습니다. 예시 코드 Hello World Hello World Hello World Hello World Hello World Hello World 위의 코드는 아래의 결과값을 보여줍니다. Hello Wor.. html 알아보기 : html이란? 위 글은 공부했던 내용을 새롭게 정리하는 글로, html 관련 내용을 포함합니다. HTML 이란?html 이란, HyperText Markup Language의 약자로, 말 그대로 웹 문서를 만들기 위한 마크업 언어의 일종입니다.웹 개발을 하기 위해 필요한 가장 기본적인 요소로, 단순한 형태로 웹 페이지를 구성할 수 있습니다. HTML의 구성HTML은 태그로 구성되어 있으며, 태그 안에 새로운 태그를 중첩시켜 구성합니다.가장 밖에는 html의 범위를 표시하는 태그가, html 태그 안에는속성을 지정하는 Hello World 웹 개발의 첫 시작입니다 실행 결과 Hello World 웹 개발의 시작입니다 "> HTML 삽입미리보기할 수 .. typescript - 타입 타입의 지정type ofconsole.log(typeof 'hello') //string - 변수의 타입을 반환해주는 연산자 - 반환되는 타입은 string 문자열로 반환됩니다. typescript 의 타입 1) string : 문자열 타입 Ex) "Hello world" 2) number : 숫자 타입 Ex) 25, Infinity, NaN 3) boolean : 참/거짓 Ex) true, false 4) object : 객체 타입interface PersonType{ name: string; age: number; isStudent: boolean; studentNum?: number;}const person:Person.. typescript - 시작 : typescript란? typescript란? - 자바스크립트에 타입을 부여한 언어로, 자바스크립트의 확장판이라 볼 수 있습니다. - 타입스크립트 파일을 자바스크립트로 변환하기 위해 컴파일 과정을 거쳐야 합니다. 왜 typescript를 사용하는가? 어짜피 javascript로 컴파일을 하는데, 왜 typescript를 사용할까요? - 변수의 타입이 컴파일 타임에 타입이 결정되기 때문에, 타입에러를 미리 발견할 수 있습니다. > javascript는 런타임 과정에서 타입이 지정되기 때문에, 타입에러를 쉽게 발견할 수 없습니다. - 변수를 미리 지정하기 때문에, 코드의 가독성을 높이고, 예측이 쉬워집니다. > a+b 라는 결과값을 정할때, js는 ab 인지, (a+b)인지 타입에 따라.. 무한스크롤(infinite-scroll) 무한스크롤(infinite-scroll)이란? - 많은 양의 데이터를 편리하게 보기 위한 페이징 방법 중 하나입니다. - 페이지 하단에 도달했을 때, 일정량의 콘텐츠를 로드시켜주는 UX 방식입니다. 무한 스크롤의 장점 - 사용자 접근성 및 콘텐츠 탐색이 쉽습니다. - 모바일일때 특히 더 나은 사용자 접근성을 제공합니다. - 다음 콘텐츠 탐색을 위한 추가클릭이 없으며, 더 짧은 로드시간을 제공합니다. 무한 스크롤의 단점 - 많은양의 데이터를 다루게 되므로 페이지 성능이 점점 떨어집니다. - 맨 아래영역, footer를 확인하려면 모든 콘텐츠를 로드해야하므로 힘들어집니다. - 특정 항목을 찾기 어려우며, 원래 위치로 되돌아가기 힘듭니다. 페이지네이션과의 차이 .. 이전 1 2 3 4 5 6 7 ··· 18 다음 목록 더보기
