목록CSS (4)

단단히

CSS 기초 사용법

CSS 개념 HTML요소를 스타일링과 레이 아웃하는 코드이다. ◎ 스타일링 : 요쇼의 내용(이미지, 글씨.. 등)에 관한 색깔, 크기, 모양, 형태, 효과, 장식을 적용하는 것을 의미 ◎ 레이아웃 : 전체적인 위치, 크기, 배치 등에 관하여 설정하는 것을 의미 CSS 코드 위치 1) 인라인 CSS 인라인 css 2) 내부(Inner) CSS 내부 css 3) 외부(Outer) CSS 인라인 css @charset "UTF-8"; p { width: 200px; border: 1px solid #000 } 따로 CSS파일(.css)을 만들어서 작성한다. CSS 형식 table{ border: 1px solid #000; border-collapse:collapse; } - 요소를 선택한다. 위 형식에서는 ..
HTML,CSS/개념 정리 2022. 8. 1. 11:12
Border 테두리 선

border (테두리) : 패딩의 끝 부분을 둘러싸며, 테두리의 넓이(선 굵기), 색, 스타일을 지정할 수 있다. [ 기본 사용법 ] /* 선 두께 1px 선 종류 solid 선 색깔 검정*/ border : 1px solid #000; [ 구분 사용법 ] 요소는 블랙라인 요소(한 줄을 모두 차지)이다. border CSS에 대해 알아보자! 이 테두리는 20px 이 테두리는 30px 위 코드의 결과는 아래와 같다. [ 방향 적용 단축 표기 ] 적용 순서는 padding과 margin이 동일하다. [ 테두리 모서리 ] 왼쪽 위에 테두리 오른쪽 위에 테두리 왼쪽 아래 테두리 오른쪽 아래 테두리 전체 테두리 위 코드의 결과는 아래와 같다.
HTML,CSS/개념 정리 2022. 7. 25. 15:31
Box Model [ contents / padding / border / 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,CSS/개념 정리 2022. 7. 23. 14:35
visual studio code 설치

https://visualstudio.microsoft.com/ko/ Visual Studio: 소프트웨어 개발자 및 Teams용 IDE 및 코드 편집기 Visual Studio 개발 도구 및 서비스를 사용하면 모든 개발자가 모든 플랫폼 및 언어로 앱을 쉽게 개발할 수 있습니다. 무료로 어디서나 코드 편집기 또는 IDE를 사용하여 개발하세요. visualstudio.microsoft.com 위의 주소로 들어가면 아래와 같은 화면이 나온다. 나는 HTML/CSS을 위해 Visual Studio Code 를 설치한다. 그래서 가장 Visual Studio 버튼 위에 커서를 올리면 운영체제관련된 다운로드 목록이 나온다. 개인에 맞춰 누르면 되는데 나는 Windows X64 를 눌렀다. 누르자 마자 화면이 전환..
HTML,CSS/개념 정리 2022. 7. 15. 03:41
Prev 1 Next