단단히

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..

[LinkedList] LinkedList는 List 구현 클래스이다. 때문에 ArrayList와 비슷한 사용방법을 가지고 있지만 내부 구조는 완전히 다르다. LinkedList는 체인처럼 인접 참조를 링크해서 관리한다. 연결된 앞뒤 링크만 변경되고 나머지 링크는 변경되지 않는다. 마찬가지로 특정 인덱스를 삽입할 때도 앞뒤 링크만 변경되고 나머지 링크는 변경되지 않는다. 위 그림과 같이 앞뒤의 링크만 변경되기 때문에 빈번한 객체 삽입과 삭제가 일어나는 곳에서 좋은 성능을 발휘한다. [ ArrayList VS LinkedList ] - 차이점 - 속도 차이 ArrayList와 LinkedList의 속도 차이는 생각보다 많이 난다. 위의 코드에서는 반복을 100,000으로 지정했기에 나름 결과를 바로 볼 수..