단단히

HTML 코드를 작성하다 보면 각 요소에 맞는 CSS를 넣기 위해서 묶어주게 되는데, 이때 div요소를 많이 사용하게 된다. 많이 사용해도 상관은 없지만 혼동이 발생될 수 있다. 가령 , 와 같이 사용하면, div가 많이 사용돼서 나중에는 짝을 찾느라 많은 시간을 소요하게 된다. 그래서 추가된 요소, 시맨틱 요소( , .. )이다. /*시맨틱 요소를 사용하지 않고 div요소를 적용했을 때 코드이다.*/ /*semantic 요소를 적용했을 때*/ 이처럼 시맨틱 요소를 사용하면 와 같은 주석을 달지 않아도 된다. 혼동되는 것을 줄여준다. 이때 필요한 요소를 작업자가 임의 선정하여 적용하면 된다. 즉, div와 semantic요소를 적정하게 혼용하여 사용한다. [semantic 요소를 적용한 코드] Welco..

html 파일을 웹 표준으로 만들었는지를 검사하는 습관을 들이는 것이 좋다. 평소에 규칙을 지켜서 작성하는 습관이 필요하다. 더보기 일반적인 웹표준 규칙 • 일반요소는 시작 태그와 종료 태그를 반드시 사용해야 합니다. • 요소의 중첩은 순서를 지켜야 합니다. • html파일의 코드 템플릿을 사용해야 합니다. • meta태그로 인코딩을 지정해야 합니다. • img 요소는 alt 속성을 가져야 합니다. HTML 웹표준 유효성 검사 URL https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some version..

border (테두리) : 패딩의 끝 부분을 둘러싸며, 테두리의 넓이(선 굵기), 색, 스타일을 지정할 수 있다. [ 기본 사용법 ] /* 선 두께 1px 선 종류 solid 선 색깔 검정*/ border : 1px solid #000; [ 구분 사용법 ] 요소는 블랙라인 요소(한 줄을 모두 차지)이다. border CSS에 대해 알아보자! 이 테두리는 20px 이 테두리는 30px 위 코드의 결과는 아래와 같다. [ 방향 적용 단축 표기 ] 적용 순서는 padding과 margin이 동일하다. [ 테두리 모서리 ] 왼쪽 위에 테두리 오른쪽 위에 테두리 왼쪽 아래 테두리 오른쪽 아래 테두리 전체 테두리 위 코드의 결과는 아래와 같다.

Box Model에 대해 알아보자. Box Model은 모든 요소가 갖는 구조이다. HTML의 기본 구조를 알아야 코드를 볼 때 편하다. 2022.07.21 - [HTML,CSS/개념 정리] - HTML 기본 코드 HTML 기본 코드 [ HTML의 기초 ] HTML은 코드를 작성한 파일이다. 브라우저에서 실행하여 결과를 볼 수 있는 마크업 코드이다. 표준 브라우저는 크롬, 익스플로러, 에지.. 등이 있다. 파일 확장자는. html이다. (인코 start-1199.tistory.com border는 '테두리 선'이라고 생각하자. padding과 margin을 설명할때 구간을 보여주기 때문이다. BoxModel 1px이고 색이 빨간( rgb(255,0,0) )인 테두리 선(border)이 들어간다. 아래는 ..

[ HTML의 기초 ] HTML은 코드를 작성한 파일이다. 브라우저에서 실행하여 결과를 볼 수 있는 마크업 코드이다. 표준 브라우저는 크롬, 익스플로러, 에지.. 등이 있다. 파일 확장자는. html이다. (인코딩은 UTF-8이다.) 코드를 요소 또는 엘리먼트라고 하며 소문자로 작성한다. [ HTML의 기본 코드] html 코드 작성 구간 [html 유효성 검사] html 파일을 웹 표준으로 만들었는지를 검사하는 것이다. 웹 표준을 반드시 지켜야하는 것은 아니지만 평소에 작성 규칙을 지켜서 작성하는 습관이 필요하다. 일반적인 웹표준 규칙 • 일반 요소는 시작 태그와 종료 태그를 반드시 사용해야 합니다. • 요소의 중첩은 순서를 지켜야 합니다. • html 파일의 코드 템플릿을 사용해야 합니다. • met..

2022.07.15 - [HTML,CSS/개념 정리] - visual studio code 설치 위와 같이 설치 후 환경 설정을 해야한다. 우선 들어가면 화면 색상 설정 화면이 나오는데 나는 '어둡게'로 선택했다. (만약 화면 색상 (색 테마)을 바꾸고 싶다면 ctrl + K , ctrl + T을 누르면 된다.) 그리고 언어팩 팝업창이 아래쪽에 나온다. 직접 설치하지 않아도 되기 때문에 편하다. 바로 누른다. 그리고 시작하기 위쪽 시작하기를 지우고 확장자를 설정하기로 한다. 만약 옆쪽이 안 나오기 때문에 ctrl + B를 누르면 사이드바를 사용할 수 있다. 사이드바 단축키 VSC 탐색기 >> ctrl + sh + E 확장 단축기 >> ctrl + sh + X [사용 확장자] **여기 있는 확장자는 언제 ..