728x90 CSS9 [CSS] link Style 더보기 Day44. 230630 https://www.w3schools.com/css/css_link.asp CSS Styling Links W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 링크 상태에 따라 링크를 다르게 지정 할 수 있다. 다음은 4가지 링크 상태이다. linkStyle.jsp> 이용안내 객실소개 예약방법 예약하기 네이버 신문사 삼성패널 중소기업 65인치.. 2023. 7. 1. [CSS] 폼(form) 더보기 Day38. 230622 폼(form) 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 창 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들. 쿼리스트링? 쿼리스트링은 사용자가 입력 데이터를 전달하는 방법 중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다. 사용자가 입력 데이터를 전달하는 방법중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다. 폼 만들기 여러 폼 요소 form태그의 속성 속성 설명 method 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다. get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. post - 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의.. 2023. 6. 22. [HTML,CSS] 목록을 만드는 태그, 목록 스타일 더보기 Day38. 230622 [HTML] 목록을 만드는 태그 태그 : 순서 없는 목록 만들기 내용 내용 .. 순서가 필요하지 않은 목록(unorder list)을 만들 때 태그를 사용하고, 내부에 요소(list item)를 포함하여 각 항목을 표시한다. 태그 : 순서 목록 만들기 내용 내용 .. 순서가 필요한 목록(order list)을 만들 때 태크를 사용하고, 내부에 요소(list item)를 포함하여 각 항목을 표시한다. 태그 속성으로 순서 목록의 숫자와 순서 바꾸기 1. type 속성 태그는 순서 목록이기 때문에 각 항목 앞에 1,2,.. 같은 숫자가 기본적으로 붙는데 태그의 type 속성을 이용해 숫자의 종류를 다양하게 조절 할 수 있다. 속성 값 설명 1 숫자(기본값) a 영어 소문자 A .. 2023. 6. 22. [CSS] CSS박스모델 더보기 Day37. 230621 CSS박스모델 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다. 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않는다. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 마진은 눈에 보이지 않는다. border-color:red; border-color:red green; border-color:red green blue border-color:red green blue violet; 2023. 6. 21. [CSS] background 더보기 Day37. 230621 색상과 배경을 위한 스타일 배경 색과 배경이미지 background-color 속성 - 배경 색 지정하기 background-color: background-image 속성 - 웹 요소에 배경 이미지 넣기 background-image: url(파일 경로) body{background-imange: url("a.jpg");} #area{background-imange: url("a2.jpg");} background-repeat 속성 - 배경 이미지 반복 방법 지정 background-repeat : repeat | repeat-x | repeat-y | no-repeat 속성 값 설명 repeat 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복 repe.. 2023. 6. 21. [CSS] 텍스트 관련 스타일 더보기 Day37. 230621 텍스트 관련 스타일 글꼴 관련 스타일 font-family속성 웹 문서에서 사용할 글꼴은 font-family속성으로 지정한다. font-family:[,,] @font-face 속성 - 웹 폰트 사용하기 웹 폰트란? 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식. 사용자 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴들을 사용자가 컴퓨터에 다운로드한 후 표시하기 때문에 웹제작자가 의도한 대로 텍스트를 표시 할 수 있다. 웹 폰트 적용하기 @font-face{ font-family:글꼴 이름; src:url(글꼴 파일 경로) format(파일 유형); } font-size .. 2023. 6. 21. [CSS] 캐스케이딩 스타일 시트(css) 더보기 Day37. 230621 캐스케이딩 스타일 시트(css) CSS에서 'C'는 캐스케이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다. 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지 결정함을 뜻한다. 스타일 간의 충동을 막기 위한 방법 1. 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다. 2. 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다. 스타일 우선순위 우선순위는 다음의 세 가지 개념에 따라 지정된다. 다음은 가장 중요한 것부터 차례대로 나열한 것이다. 얼마나 중요한가? 1. 사용자 스타일 시트가 최우선 2. 제작.. 2023. 6. 21. [CSS] 주요 선택자 더보기 Day37. 230621 주요 선택자 선택자? 스타일 속성을 적용하는 요소. 전체 선택자 *{속성:속성 값; 속성:속성 값; ...} 스타일을 모든 요소에 적용할 때 사용한다. 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다. 전체선택자로는 *를 사용한다. 또한 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다. 태그 선택자 태그{스타일} 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. p{ fomt-size:14px; } -> 모든 p의 문단에 글자크기 12px 스타일이 적용된다. 클래스 선택자 .클래스명{스타일} 특정 부분에만 스타일을 적용할 때 사용하는 것. 태그 대신 클래스 이름을 사용한다. MBTI 16가지 성격 유형 검사 id 선택자 #아이디명{스타일} 웹 문서.. 2023. 6. 21. [CSS] 스타일과 스타일 시트 더보기 Day37. 230621 스타일과 스타일 시트 스타일(style)? 웹 문서에서 스타일(style)이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용을 가리킨다. 스타일 형식 p{text-align: center;} 선택자{스타일 속성:속성 값;} 스타일과 스타일 시트 내부 스타일 시트(Internal Stylesheet) 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것. 태그 안에서 정의해야 하고 태그 안에서 작성해야한다. style 태그에 적용한 스타일이 적용됨 외부 스타일 시트(External Stylesheet) 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것. HT.. 2023. 6. 21. 이전 1 다음 728x90
