본문 바로가기

CSS문법4

CSS display:inline-block CSS display:inline-block 값 display: inline과 비교할 때, 주요 차이점은 display: inline-block을 사용하여 요소의 너비와 높이를 설정할 수 있다는 것이다. 또한 display: inline-block에서는 상단 및 하단 여백/패딩이 존중되지만 display: inline에서는 그렇지 않습니다. display: block과 비교할 때, 주요 차이점은 display: inline-block은 요소 뒤에 줄 바꿈을 추가하지 않으므로 요소는 다른 요소 옆에 앉을 수 있습니다. 다음 예제에서는 inline, display: inline-block 및 display: block의 서로 다른 표시 동작을 보여 줍니다: display 속성 display: inline 서.. 2023. 8. 26.
CSS 둥근 테두리 CSS 둥근 테두리 border-radius 속성은 요소에 반올림된 테두리를 추가하는 데 사용된다: border-radius 속성 이 속성은 요소에 반올림된 테두리를 추가하는 데 사용됩니다: Normal border Round border Rounder border Roundest border 위의 코드를 실행한 결과 화면은 아래 그림과 같다. 지금까지 CSS border-radius 둥근 테두리 스타일 활용에 관하여 간략히 살펴보았다. 꼭 실습하기를 추천합니다. 모두 화이팅입니다.!!!! 출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다. 2023. 7. 17.
CSS 테두리 측면 속성 설정 CSS 테두리 - 개별 측면 이전 페이지의 예를 통해 각 면에 대해 다른 경계를 지정할 수 있음을 알 수 있다. CSS에서는 각 테두리(위, 오른쪽, 아래 및 왼쪽)를 지정하는 속성도 있다: p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } p요소에 위쪽 테두리는 점선, 오른족 테두리는 직선, 아래쪽 테두리는 점선, 왼쪽 테두리는 직선으로 스타일한다. 개별 측면 테두리 2개의 다른 테두리 스타일. border-style : dotted, solid 값을 설정하면, 위쪽, 아래쪽 테두리는 점선, 왼쪽, 오른쪽 테두리는 직선을 스타일한다. 아래 그림은 결과.. 2023. 7. 15.
CSS 선택기(selector) CSS 선택기는 스타일을 지정할 HTML 요소를 선택한다. CSS 선택기(Selector) CSS 선택기는 스타일을 지정할 HTML 요소를 "찾거나" 선택하는 데 사용된다. CSS 실렉터는 다음의 5가지 범주로 나눌 수 있다: 단순 선택기(이름, ID, 클래스를 기준으로 요소 선택) 조합 선택기(요소 간의 특정 관계에 따라 요소 선택) 유사 클래스 선택기(특정 상태에 따라 요소 선택) 유사 요소 선택기(요소의 일부를 선택하고 스타일 지정) 속성 선택기(속성 또는 속성 값을 기준으로 요소 선택) 이 페이지에서는 가장 기본적인 CSS 선택기에 대해 설명한다. CSS 요소 선택기(CSS element selector) 여기서 페이지의 모든 요소는 빨간색 텍스트 색상으로 가운데 정렬된다: p { text-ali.. 2023. 6. 29.