몽키의 코딩작업실

복합선택자가 중요한 이유!!복합 선택자를 사용하면 특정 부모 요소 안에 있는 태그나, 특정 태그 이후에 나오는 요소들만 스타일링할 수 있다. 복합 선택자 종류 하위 선택자는 특정 요소 안에 있는 모든 요소를 선택한다. 자식 선택자는 부모의 바로 아래에 있는 요소만 선택한다. 인접 형제 선택자는 특정 요소 바로 뒤의 형제 요소 하나만 선택한다. 일반 형제 선택자는 특정 요소 뒤에 나오는 모든 형제 요소를 선택한다. 실습 예제 (HTML 코드) 과일 목록 사과 바나나 과일은 맛있다 오렌지 포도  실습 예제 (CSS 코드)/* (1) 하위..

1폼 요소 (form)사용자의 데이터를 입력받는 HTML 요소2체크박스 입력 (type=“checkbox”)여러 개의 선택지를 동시에 선택3라디오 버튼 입력 (type=“radio”)한 그룹 내에서 하나의 선택지만 선택4색상 선택 (type=“color”)색상 팔레트에서 색을 선택5날짜 및 시간 입력날짜와 시간을 선택할 수 있는 입력5.1날짜 입력 (type=“date”)날짜를 선택할 수 있음5.2날짜와 시간 입력 (type=“datetime-local”)날짜와 시간을 함께 선택할 수 있음5.3월 선택 (type=“month”)연도와 월만 선택할 수 있음5.4주 선택 (type=“week”)해당 연도의 몇 번째 주 선택5.5시간 입력 (type=“time”)시간만 입력할 수 있음6숫자 입력 (type=“..

순서 없는 목록 (ul)• 순서가 중요하지 않은 항목들을 나열할 때 사용• 태그 안에 태그로 항목을 나열• 예시: 목록 순서가 중요하지 않은 경우 (예: 쇼핑 목록)순서 없는 목록 순서 없는 목록1 순서 없는 목록2 순서 없는 목록3 순서 있는 목록 (ol)• 항목에 순서가 중요한 경우 사용• 태그로 목록을 만들고, 항목은 태그로 표시• 예시: 준비물 목록, 작업 순서 등순서 있는 목록 순서 있는 목록1 순서 있는 목록2 순서 있는 목록3  설명 목록 (dl)• 특정 용어나 정의를 설명할 때 사용• 태그로 시작하고, 는 설명할 용어, 는 그 용어에 대한 설명을 작성• 예시: 용어집,..

1. 볼드체 태그 (b, strong) 단순히 텍스트를 굵게 표시하는 태그. 의미는 없고, 오직 스타일링만을 위한 태그텍스트를 강조하는 의미를 가진 태그. 시각적으로 볼드체처럼 보이지만, 중요한 내용을 강조할 때 사용검색 엔진이나 스크린 리더기에서는 이를 중요한 문장으로 인식하고, 시각적으로도 중요성을 강조시각장애인에게는 더 크게 읽어줌 2. 이탤릭체 태그 (i, em)단순히 이탤릭체(기울임꼴)를 적용하는 태그. 디자인적인 효과만 있고, 의미가 특별히 부여되지 않음강조된 이탤릭체. 텍스트를 강조하는 의미를 담고 있어. 시각적으로는 이탤릭체지만, 스크린 리더기나 검색 엔진에서는 강조된 텍스트로 해석되며 더 중요한 텍스트로 인식 3. 기타 텍스트 스타일 태그텍스트를 작게 표시형광펜으로 마킹한 것처럼, 중요한..

1. 인라인 스타일 (Inline Style)• HTML 태그 안에 style 속성을 사용해서 스타일을 지정하는 방법• 이 방식은 태그마다 직접 스타일을 적용하므로, 다른 부분에 영향을 주지 않고 해당 태그만 스타일을 수정가능 빨간색 글자입니다.   2. 익스터널 스타일 (External Style)• 외부 CSS 파일을 만들어서 링크하는 방법• 보통 여러 페이지에 동일한 스타일을 적용할 때 이 방법을 사용• HTML 파일과 CSS 파일을 분리하면, 코드 관리가 쉬워지고 유지보수도 간편 CSS 파일 (styles.css):p { color: red;}  3. 인터널 스타일 (Internal Style)• HTML 파일 내 태그 안에  어떤 방식이 좋을까?• 인라인 스타일은 짧은 HTML 문서에서 ..

글로벌 속성draggable = “true” : 요소를 마우스로 끌어서 이동할 수 있도록 설정함화면에서 직관적으로 어떤 요소가 움직이게끔 할 수 있음 파일을 휴지통으로 드래그 하여 삭제할때엑셀에서 컬럼의 위치를 변경할 때lang : 어떤 언어로 텍스트가 구성되어 있는지 검색엔진 등에 알려줌구글이나 네이버 같은 검색엔진에서 검색하고 분석하는 검색봇들이 우리가 만들고 있는 웹사이트를 분석하는데 이렇게 알려주면 좀 더 빠르고 정확하게 웹페이지를 분석할 수 있음.lang = “en” : 해당 HTML 페이지의 주 언어가 영어임을 표시lang = “ko” : 해당 HTML 페이지의 주 언어가 한국어임을 표시활용검색엔진(구글, 네이버 등)이 웹사이트를 분석할 때, 지정된 언어 정보를 바탕으로 페이지를 빠르고 정확하..