CSS25 CSS로 체크박스 스타일 만들기 CSS로 기본적인 체크박스를 스타일링하는 방법을 설명드리겠습니다. HTML에서 요소는 브라우저마다 기본 스타일이 다르기 때문에, 이를 커스터마이징하기 위해 appearance 속성을 사용하여 기본 스타일을 제거하고 CSS로 원하는 스타일을 적용할 수 있습니다.체크박스 선택" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 체크박스 선택/* 체크박스 컨테이너 */.custom-checkbox { display: inline-flex; align-items: center; font-size: 18px; cursor: pointer;}/* 체크박스 숨기기 */.custom-checkbox input[type="checkbox"] { di.. 2024. 10. 2. CSS로 아코디언 만들기 HTML과 CSS로 간단한 아코디언을 만드는 방법을 설명드리겠습니다. 자바스크립트 없이도 CSS만으로 아코디언을 만들 수 있지만, 자바스크립트와 함께 사용하면 더 다양한 기능을 구현할 수 있습니다. 여기서는 순수 HTML과 CSS만으로 구현하는 기본적인 아코디언을 설명하겠습니다. 국회의원의 수는 법률로 정하되, 200인 이상으로 한다. 국민의 모든 자유와 권리는 국가안전보장·질서유지 또는 공공복리를 위하여 필요한 경우에 한하여 법률로써 제한할 수 있으며, 제한하는 경우에도 자유와 권리의 본질적인 내용을 침해할 수 없다.모든 국민은 근로의 권리를 가진다. 국가는 사회적·경제적 방법으로 근로자의 고용의 증진과 적정임금의 보장에 노력하여야 하며, 법률이 정하는 바에 의하여 최저임금제를 시행하여야 한다." d.. 2024. 9. 30. CSS로 팝업만들기 팝업만들기(예시)HTML 오늘의 작업 닫기 css로 팝업만들기 CSS.bg{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.75); transition: opacity 300ms; z-index: 1; opacity: 0; visibility: hidden;}.bg:target{ opacity: 1; visibility: visible; }.popup{ display: block; position: fixed; top: 50%; lef.. 2023. 9. 29. css로 햄버거 메뉴 만들기 (<label>활용) 햄버거 메뉴란 일반적으로 홈페이지의 스마트폰에서 자주 사용되는 기능입니다. 좁은 화면 특성상 유저가 사용하기 편하도록 설계된 UI디자인입니다. (3선 아이콘은 햄버거 모양을 연상시킨다고 해서 햄버거 메뉴라고 불립니다.) 햄버거 메뉴 만들기(예시) HTML 햄버거 메뉴를 만들때 중요한 포인트라고 할 수 있는 요소는 항목명과 안에서 구성하는 요소를 연관 및 반응시키기 위해 사용됩니다. 따라서 클릭했을때, 동일한 동작이 가능해지도록 하는 역할을 합니다. 즉, 태그의 for 속성값과 input의 id의 속성값을 동일하게 연관짓게 합니다. 뉴스 경제 정치 문화 스포츠 구독 게임 영화 애니메이션 여행 육아 CSS 처음 보이는 화면에는 3선 아이콘만이 나오는데, 이는 .menu 가 display: none;으로 되어.. 2023. 9. 19. display: block, inline-block, inline 차이점 display 속성에서 html 요소가 형성하는 박스를 조정할 수 있으며, 주로 display에는 block, table, flex, gird등으로 css로 레이아웃을 구성하는 용도로도 많이 쓰이고 있습니다. display: block; display: block은 부모요소의 너비만큼 같은 너비로 채워집니다. 예를 들어 부모요소의 너비가 300px라고 가정했을 때, 자식요소의 너비도 300px만큼 채워집니다. HTML 오늘의 작업 1 오늘의 작업 2 오늘의 작업 3 CSS .block div{ display: block; background: #ffd67a; } .block div:nth-child(2){ background: #ffe29f; } .block div:last-child{ backgroun.. 2023. 9. 15. 플로우(flow) 다이어그램 만들기 사각형과 삼각형을 합친 형태로 가상요소인 after, before를 동시에 사용하여 순서, 흐름을 표현해보도록 하겠습니다. 플로우 만들기(예시) HTML 먼저 자식 요소들을 감싸주는 태그를 지정합니다. 그 안에 플로우 요소(태그)들을 추가해나갑니다. 배송시작 배송중 배송완료 CSS 위 그림에서 보이는 것 처럼 왼쪽에서 오른쪽으로 가는 형태이므로, 부모요소를 flex로 감싸줍니다. 예시는 3개로 구성되어있기 때문에 폭을 약 33%로 지정해준 후, 각 스텝마다 after와 before를 삼각형으로 만들어줍니다. before삼각형은 after삼각형의 뒤에 배치되므로 포지션을 옮겨가면서 위치를 조정합니다. .step-box { display: flex; flex-wrap: nowrap; justify-conte.. 2023. 9. 13. 연혁(History) 다이어그램 만들기 일반적으로 회사나 박물관 등 기관 홈페이지의 연혁페이지에서 자주 볼 수 있는 항목입니다. 연혁 표 만들기(예시) HTML 연도를 묶는 dl태그를 사용하고 dt를 연도를 지정합니다. 그리고 dd는 그 연도에 해당하는 사건을 기입합니다. 그 아래에 dl태그를 추가해나가면서 연도를 늘려나갑니다. 2020 회사 창립 2021 서울지사 설립 2022 코스닥 상장 2023 2호점 출점 CSS .history dl:before는 선을 깔아 주고, 그 위에 .history dt:before에는 원을 배치시킵니다. .history dl{ position: relative; padding: 0 0 30px 48px; display: flex; flex-wrap: nowrap; justify-content: space-be.. 2023. 9. 13. position: absolute; 로 중앙(가운데)에 맞추기 position: absolute; 를 사용하여 요소를 컨텐츠의 중앙에 위치시켜보겠습니다. 정중앙에 위치시키고자하는 요소에 transform: translate(-50%,-50%);를 지정할 필요가 있으며, 지정했을 때와 안했을 때의 차이까지 알아보겠습니다. 상하좌우 중앙 정렬(정중앙) 부모요소에 position: relative;를 해주면서 자식요소가 그 범위안에 움직일 수 있도록 position: absolute;와, top와 left를 각각 50%씩 그리고 transform: translate(-50%,-50%);를 지정해줍니다. HTML CSS .middle { position: relative; width: 200px; height: 200px; background-color: #ffd67a; .. 2023. 3. 14. ccs로 화살표 만들기 2 (가상요소 ::before, ::after 활용) css로 삼각형 만들기 1편에서 만든 삼각형에 가상요소를 생산하여, 가운데 막대를 만들어줍니다. 기본원리는 삼각형과 사각형의 조합입니다. 위쪽 방향 삼각형 위쪽 방향을 만든 후, 가상요소의 범위를 정하는 position: relative; 를 지정합니다. ::after에서는 사각형을 만든 후 top 위치를 삼각형의 높이 만큼 위치해줘야 면과 면이 닿을 수 있습니다. 사각형은 삼각형의 정중앙 바로 아래에 배치하기 위해 translate(-50%, 0%)을 사용합니다. -50%는 개체의 너비의 가운데에 위치시키는 것을 의미합니다. .arrow01 { position: relative; width: 0; height: 0; border-style: solid; border-width: 0 40px 60px 4.. 2023. 3. 13. 이전 1 2 3 다음
