728x90
반응형
SMALL

[WEB] 웹을 구성하는 요소

프로그래밍이란? 컴퓨터와 소통하는 방법을 의미 컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능 웹 개발을 하기 위한 언어로 브라우저와 소통 HTML, CSS, JavaScript HTML : 정보 또는 설계도 CSS : 디자인 또는 스타일링 JavaScript : 기능과 효과 웹사이트 제작 시 고려 사항 웹 표준 : 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 웹 접근성 : 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

  • format_list_bulleted Front-End
  • · 2023. 2. 27.
  • textsms
[CSS] :nth-child

[CSS] :nth-child

:nth-child CSS :nth-child() 의사 클래스는 형제 사이에서의 순서에 따라 요소를 선택한다. /* 목록의 두 번째 선택 */ li:nth-child(2) { color: lime; } /* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */ :nth-child(4n) { color: lime; } Syntax nth-child 의사 클래스는 형제의 목록에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정한다. 인덱스는 1부터 시작한다. 키워드 값 odd : 형제 요소에서 홀수번째(1, 3, 5, ...)인 요소를 나타낸다. even : 형제 요소에서 짝수번째(2, 4, 6, ...)인 요소를 나타낸다. 함수형 표기법 : 사용자 지정 패턴을 만족한 인덱스를 ..

  • format_list_bulleted Front-End
  • · 2023. 1. 16.
  • textsms
[CSS] grid-template-columns 속성

[CSS] grid-template-columns 속성

grid-template-columns CSS grid-template-columns 속성은 line 이름을 정의하고 grid columns의 사이즈를 정한다. 464 783 207 149 Try it grid-template-columns: 60px 60px; grid-template-columns: 1fr 60px; grid-template-columns: 1fr 2fr; grid-template-columns: 8ch auto; Syntax /* Keyword value */ grid-template-columns: none; /* values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-temp..

  • format_list_bulleted Front-End
  • · 2023. 1. 14.
  • textsms
[CSS] justify-content 속성

[CSS] justify-content 속성

justify-content CSS의 justify-content 속성은 브라우저가 flex container의 main 축과 grid container의 inline 축에 따라 요소 간의 간격과 주변 공간을 분배하는 방법을 정의한다. Try it justify-content: start; justify-content: center; justify-content: space-between; justify-content: space-around; justify-content: space-evenly; Syntax /* Positional alignment */ justify-content: center; /* center 주위로 item들을 묶는다 */ justify-content: start; /* s..

  • format_list_bulleted Front-End
  • · 2023. 1. 13.
  • textsms

[CSS] display 속성 : flex / grid / block / inline 등

display display CSS 속성은 block 요소와 inline 요소 중 어느 쪽으로 처리할지와 함께, flow, grid, flex 처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다. display 속성은, 형식적으로는 요소의 내부와 외부 디스플레이 유형을 설정한다. 외부 디스플레이 유형은 플로우 레이아웃에 요소가 참여하는 방법을 나타내고, 내부 디스플레이 유형은 자식의 레이아웃 방식을 설정한다. Syntax display 속성은 키워드 값을 사용해서 지정한다. 키워드는 6개의 카테고리로 분류할 수 있다. .container { display: ; } 1. Outside : 요소의 외부 디스플레이 유형을 설정하는 키워드이다. 외부 디스플레이 유형은 플로우 레이아웃에서 요소 자신의 역할과 ..

  • format_list_bulleted Front-End
  • · 2023. 1. 13.
  • textsms

[CSS] 기본 구조, 문법 정리

width: 100px; max-width min-width 요소의 가로 너비 height: 100px; max-height min-height 요소의 세로 너비 margin-top: 20px; margin-top margin-bottom margin-left margin-right 요소의 외부(바깥) 여백 padding-top: 20px; padding-top padding-bottom padding-left padding-right 요소의 내부(안쪽) 여백 border: 4px solid red; 요소의 테두리 선 (두께 4px / 종류 solid / 색상 red) border-radius: 10px; 요소의 모서리 둥글게 * 이 때 50% 를 입력하면 원의 모양을 하게 된다. box-shadow: ..

  • format_list_bulleted Front-End
  • · 2023. 1. 11.
  • textsms
728x90
반응형
LIST