웹개발8 [CSS] CSS 선택자(2)(기본 속성 선택자, 자식 선택자, 자손(후손) 선택자, 인접 형제 선택자, 일반 형제 선택자) 기본 속성 선택자문법 : 태그[속성이름] {}HTML 요소의 속성을 기준으로 스타일을 지정할 수 있는 CSS 기능 [CSS 코드]/* 속성값과 일치하는 태그, 요소 선택 */div[name=name2] { background: orangered;}/* 속성 안의 값이 접두사로 특정 값을 단어로 포함하는 객체 선택 *//* 즉, name1이라는 단어를 포함하고 있는 모든 객체 선택*/div[name~=name1]{ background: yellow;}/* 속성 안의 값이 특정 값으로 끝나는(접미사) 객체 선택 */div[class$=class]{ color: cyan;} [HTML 코드]div 1div 2 div 3 div 4 div1background : yellow, color : cy.. 2025. 4. 14. [CSS] CSS 선택자(1)(전체 선택자, 태그 선택자, 클래스 선택자, ID 선택자) 전체 선택자문법 : * {}모든 태그를 선택할 때 사용문서 전체에 CSS 스타일이 적용된다. * { color: red;}해당 HTML 문서에 있는 모든 글자의 색상을 빨간색으로 지정하는 CSS태그 선택자문법 : 태그이름 {}특정 태그 요소를 선택할 때 사용특정 태그를 가진 객체에만 CSS가 적용된다. p, li { color: blue;}해당 HTML 문서에 있는 모든 p 태그와 li 태그의 텍스트 색상을 파란색으로 지정하는 CSS클래스 선택자문법 : .클래스 이름 {}특정 클래스를 가진 요소에만 CSS가 적용된다. [CSS 코드].class1 { background: gray; color: purple;} [HTML 코드] 클래스 선택자 테스트 2 클래스 선택자 테스트 3 .. 2025. 4. 14. [HTML] 하이퍼링크 관련 태그, 폼 관련 태그 하이퍼링크 관련 태그페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그외부 사이트 연결, 문서 내부에서 이동 가능 - 외부 사이트로 이동하기 네이버 구글href : 링크한 페이지의 id 값이나 사이트 주소 지정target : 링크 페이지가 표시될 위치(새창 또는 현재창) 지정target="_blank" : 새 창target="_self" : 현재 창download : 링크한 페이지를 표시하지 않고 다운로드 하는 것rel : 현재 페이지의 관계 지정type : 페이지의 파일 유형 지정 - 내부에서 이동하기 본문내용1 본문내용2 본문내용3본문내용1의 상세내용[본문내용1] 클릭 시 같은 id(content1)를 가지고 있는 [본문내용1의 상세내용]으로 이동 폼 관련 태그 .. 2025. 4. 9. [HTML] 미디어 관련 태그(이미지, 오디오, 비디오) 이미지 관련 태그 태그는 닫기 태그를 사용하지 않는다.웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그 src : 삽입할 이미지 경로를 지정하는 속성alt : 이미지를 설명해주는 텍스트 속성, 이미지의 경로가 틀렸을 경우 텍스트로 대치weight, height : 이미지의 크기를 설정하는 속성, 반응형 웹을 만들 때는 가변 크기 단위를 주로 사용한다.웹 페이지에서 이미지 태그로 사용 가능한 확장자 : GIF, JPG/JPEG, PNG 오디오 관련 태그웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 태그 src : 음악 파일의 경로 지정control : 재생도구 출력 지정autoplay : 자동 재생 여부 지정loop : 반복 여부 지정preloadnone : 미리 다운로드 하지.. 2025. 4. 9. [HTML] 영역관련태그 수직 분할block 요소로 공간을 수직으로 분할할 때 사용하는 태그 div 태그 첫 번째 영역 두 번째 영역 세 번째 영역 수평분할inline 요소로 공간을 수평으로 분할할 때 사용하는 태그 span 태그 첫 번째 영역 두 번째 영역 세 번째 영역 div 태그 영역과 span 태그 영역 div태그와 span태그의 영역 div 영역 새가 봄바람을 인생을 듣기만 우리 힘있다. 같이, 지혜는 우리는 속에 것은 가슴에 오아이스도 끓는 피어나는 약동하다. 위하여 그들은 일월과 인도하겠다는 방지하는 주며, 쓸쓸한 사막이다. 살았으며, 위하여 싶이 천지는 피어나기 끓는 있는 지혜는 뿐이다. 이것을 인생에 어디 품었기 철환하였는가? 꽃 미인을 가지에 쓸쓸한 것이다. 거친 방황하.. 2025. 4. 9. [HTML] 표 관련 태그 표를 만드는 태그 : 기본적인 표를 생성해주는 태그 : 표의 행을 나타내는 태그 : 표의 제목 셀을 나타내는 태그(중앙 정렬 및 굵게 표시) : 한개의 열을 만드는데 사용하는 태그 : 테이블의 제목이나 내용을 추가하는 태그, 기본 위치는 테이블 중앙 위 웹 브라우저의 종류 브라우저명 제조사 홈페이지 익스플로러 ms https://www.microsoft.com 크롬 google https://www.google.com .. 2025. 4. 9. [HTML]목록 관련 태그 순서가 필요없는 목록순서가 필요하지 않은 목록을 만들 때 사용리스트 앞에 특정 모양이 출력된다. (circle, disc, square)해당 모양은 CSS를 이용하여 수정할 수 있다. html css javascript react 순서가 필요한 목록 태그순서가 필요한 목록을 만들 때 사용속성으로 알파벳, 숫자, 로마숫자 설정 가능CSS로 순서 설정이 가능하다type : 순서 형식(a, A, 1, i, I)start : 시작할 번호 또는 문자 내용1 내용2 내용3 기본형식 html css javascript react영문 소문자로 표기 html css javascript react 영문 대문자로 표기 .. 2025. 4. 8. [HTML] 글자 관련 태그(텍스트 태그) 제목태그제목을 입력할 때 사용하는 태그폰트의 크기는 h태그 뒤 숫자에 따라 정해져있다.번호가 증가할수록 크기가 작아진다. 첫번째로 큰 제목 두번째로 큰 제목 세번째로 큰 제목 네번째로 큰 제목 다섯번째로 큰 제목 여섯째로 큰 제목 문단 태크 : 한 개의 단락을 만들 때 사용하는 태그, 모든 문장 작성 후 자동으로 문장 개행 후 한 줄 공백을 준다. : 입력한 그래도 출력할 때 사용하는 태그 문단 영역을 나누는 태그로는 p태그와 pre 태그가 있다. p태그는 문단 영역을 나누는 태그이고, 자동으로 문장 개행 후 한줄 공백을 준다. 줄 바꿈 입력은 별도의 태그로 지정해줘야한다. 문단 영역을 나누는 태그로는 p태그와 pre 태그가 있다. pre태그는 띄어쓰기, 여.. 2025. 4. 8. 이전 1 다음
