반응형 IT/html + css28 [CSS] border 효과 테두리 선을 설정하는 속성입니다. 선의 굵기, 모양, 색상 등을 조절할 수 있습니다. 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 p{width:550px; padding:5px;} .p1{border:3px solid #ac9648;} .p2{border:3px dashed #4c384a;} .p3{border:3px dotted #e25f70;} .p.. 2020. 1. 2. [CSS] background 속성 background-repeat (배경이미지를 어떻게 반복시킬지 정한다) repeat - 가로세로로 반복 repext-x / y - x축 또는 y축으로 반복 no-repeat - 반복하지 않음 div{ background:url("../img/page_btn_pc.png") 80% center repeat-x; width:500px; height:150px; border:1px solid red; } repext-x 했을 때 결과값입니다. div{ background:url("../img/page_btn_pc.png") 80% center repeat-y; width:500px; height:150px; border:1px solid red; } repext-y 했을 때 결과값입니다. background.. 2020. 1. 1. [css] CSS 기본 속성 Font 속성 body {font-size: 12px; font-family:'Nanum Gothic', sans-serif;} h1{font:15px "굴림",Gulim;} font-weight : 글씨를 두껍게 한다(bold, normal) font-style : 기울이거나, 바로세운다(italic, normal) text-align (블록 요소에만 사용가능합니다) 속성 값 -> left(왼쪽 정렬), right(오른쪽 정렬), center(가운데정렬), justify(중앙정렬) 왼쪽 정렬 text-align:left 오른쪽 정렬 text-align:right 가운데 정렬 text-align:center 양쪽 정렬 text-align:justify div{float:left; width:300px; .. 2019. 12. 31. [html] summary, progress details 요소와 summary요소 세부 항목이나 추가 정보를 숨겨 놓았다가 펼쳐서 보여줄 수 있는 기능입니다. 세부 항목의 제목이나 요약 내용입니다. 안녕하세요 on sunday on sunday의 tistory입니다. 1,2,3 - 하루 여행 슝 IT 안녕하세요 on sunday on sunday의 tistory입니다. 1,2,3 - 하루 여행 슝 IT progress요소는 진행 상황같은 내용을 나타낼 때 사용하며 meter요소는 정해져 있는 범위의 값에서 현재 상태의 값을 나타낼 때 사용됩니다. value는 현재 값을 의미합니다. 안녕하세요 on sunday 티스토리 로딩중 : 0% 로딩 상황 하루 게시판 로딩상황: 20% 여행 게시판 로딩상황: 60% IT 게시판 로딩상황: 70% 안녕하세요 .. 2019. 12. 28. [html] form 요소 form 요소는 온라인 서식에서 작성한 값들을 서버 프로그램(서식값 처리)으로 전송하는 역할을 담당하며 블록 요소 입니다. fieldset은 블록 요소이며 form요소 안에 있는 여러 요소를 그룹화 할 때 사용하며 그룹제목 legend요소를 포함합니다. 그룹제목 label for="for 값" -> for값을 input요소의 id값과 동일하게 하면 편의성을 확대시켜줍니다. (label의 텍스트를 선택해도 input값에 커서가 이동) maxlength="8" -> 최대로 쓸 수 있는 글자 수입니다. required -> input값이 입력되었는지에 대한 부분과 유효성을 판단해주는 속성입니다. placeholder의 속성변경 선택자는 input::placeholder입니다. 아이디 : .list_conten.. 2019. 12. 27. [html] 표 만드는 table태그 웹 문서에서 표를 만드는 요소는 입니다.은 블록 요소이며 기본적으로 행과 열을 가지고 있는데,행-가로 을 만드는 요소를 - 볼드처리 및 중앙정열, 열-세로을 만드는 요소를 라고 하며 요소는 셀(cell) 이라고도 합니다. table태그에 summary="" 속성은 테이블 내용을 파악할 수 있도록 요약하는 부분입니다.화면에 출력되지는 않지만 스크린 리더(시각 장애인들을 위한 화면 낭독기)에서 읽어 줍니다. scope 속성은 센스리더리가 읽어주는 방향 표시로 커서 위치를 이동시켜줍니다scope="col" -> 아래로scope="row" -> 옆으로 상품종류의 셀은 열합치기 colspan="3" 되어있으며 아래 스마트폰,태블릿pc,테스크탑pc 제목 셀들의 큰제목이 됩니다.이런경우 상품종류 제목 셀 안에 sco.. 2019. 12. 19. [html] a 링크, a 태그 만들기 - 새창으로 이동 속성 a태그는 인라인 요소로써,텍스트나 이미지를 통하여 다른 곳으로 정보를 연결해 주는 역할을 담당하는 요소가 입니다. 내용을 입력해주세요→href="#" 에서 #자리에 이동할 경로, 사이트 주소를 입력하면 a태그 안에있는 글씨를 클릭했을때 이동하게 됩니다. 이미지에 링크를 걸고 싶다면? → src="#" #자리에 이미지 경로,사이즈 주소를 입력하면 이미지를 클릭했을 때 이동하게 됩니다. target="_blank" 는 연결된 정보 페이지를 새창에서 띄우는 속성으로기본형은 target="_self" 입니다. 위 소스코드를 입력했을 때 결과 화면입니다. 블록 요소인 p태그 안에 a태그를 입력하여 한줄로 출력됩니다. --> 이미지를 클릭하면 새창에서 on sunday 블로그 홈화면으로 이동합니다. 안녕하세요 on.. 2019. 12. 18. [html] 인라인요소 태그 인라인요소 태그 ---------위 소스코드의 결과 화면--------- - 아래 이미지를 보면 이태리체처럼 기울어지는 효과가 있다. - 아래사진에서 보듯이 글씨를 굵게 보이는 효과가 있다. 하지만 태그는 꾸밈 효과일 뿐 (css에서 기울임 효과는 font-style:italic; font-weight:bold;) 스크린리더가 강조하며 읽지 않는다. 웹 접근성을 높이기 위해 스크린 리더기까지 생각하며 강조하는 태그를 사용하려면 을 쓰는것이 맞다. 웹 문서 내에서 구분선을 그을 때 사용하는 요소 - 마지막 줄 티스토리 앞에 있는 문자는 특수문자를 사용하는 코드로 특수문자를 출력하기 위해 문자 그대로를 쓰게되면 문법적 오류가 발생할 수 있기 때문에 entity로 변화해서 입력해야 한다. entity code.. 2019. 12. 17. [html] 블록 요소, 인라인요소, 인라인블록 블록 요소 Block Element div p ul ol li dl dt dd h1~h6 table form blockquote address fieldset pre nosecipt 줄 바꿈이 일어난다. (가로사이즈가 100%차이한다고 보면 된다.) 블록요소 안에 블록요소,인라인요소를 포함할 수 있다. width, height 값을 적용 할 수 있다. padding, margin을 모든 방향에 적용할 수 있다. 인라인 요소 Inline Element span a img input strong b q strong em i textarea samp var cite addr sub select ins u 줄 바꿈이 일어나지 않고 한줄로 나열된다. 인라인 요소안에는 인라인 요소만 포함한다.(인라인 요소안에 블록.. 2019. 12. 16. 이전 1 2 3 4 다음 반응형
