본문 바로가기
반응형

All122

[CSS] word-break / word-wrap 속성 (box-sizing) word-break와 word-wrap의 속성 둘다 띄어쓰기 없이 길게 입력했을때 width값을 설정해도 바깥으로 튀어 나오게 되는데 이때 width값에 맞게 적당히 잘라 다음 줄로 내려오도록 하는 속성입니다. word-break - 아시아 언어를 제어합니다. normal - 기본값으로 자동으로 적당히 줄바꿈합니다. break-all - width값보다 글씨가 넘칠때 강제로 줄바꿈합니다 (단어가 중간에 끊기면서 줄바꿈이 일어남) keep-all - 줄바꿈을 할때 한단어에서는 줄바꿈이 일어나지 않고 단어와 단어사이(띄어쓰기한부분)에서 줄바꿈이 일어납니다. word-wrap - 비아시아 언어를 제어합니다. normal, break-word 공통 css에 추가 해놓으면 상속되는 속성이기 때문에 편리하게 사용할.. 2020. 1. 5.
[CSS] box-shadow / text-shadow 속성 box-shadow (선택영역에 그림자 효과를 주는 속성입니다.) 기본형 -> box-shadow: inset x축 y축 blur spread color inset - inset을 써주면 선택영역 안쪽으로 그림자가 생성됩니다. x축 - 가로로 밀리는 폭입니다 (음수값은 왼쪽으로 그림자가 생성됩니다) y축 - 세로로 밀리는 폭입니다(음수값은 위쪽으로 그림자가 생성됩니다) blur - 그림자가 퍼지는 정도입니다. spread - 그림자가 생기는 정도입니다(음수 값은 작아집니다.) color - 그림자 색을 선택할 수 있습니다. box-shadow:3px 3px; box-shadow:3px 3px 4px; box-shadow:3px 3px 4px 4px; box-shadow:3px 3px 4px 4px rgb.. 2020. 1. 4.
[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.
[javaScript] 함수1 함수를 사용하여 코드를 저장한 것을 함수 정의문이라고 합니다. 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다. 기본형은 아래와 같이 선언합니다. 다음과 같이 익명함수(함수명이 없는 함수)를 선언하고 변수에 참조해도 됩니다. 함수 정의문({...})안에 작성된 코드는 즉시 실행되지 않습니다. 함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되면 실행됩니다. 정의 되는 함수를 호출하는 아래와 같습니다. 함수명(); 또는 참조 변수(); var count=0; myFnc(); function myFnc(){ count++; document.write("hello" + count," "); } myFnc(); var theFnc=function(.. 2019. 12. 30.
[javascript] 브라우저모델 BOM window 객체 window 객체의 메서드 종류 종류 설명 open("URL","새창이름","새창옵션") URL 페이지를 새 창으로 나타냅니다. alert(data) 경고 창을 나타내고 데이터를 보여줍니다. 방문자가 [확인] 버튼을 누르면 alert()를 사용한 다음 위치의 코드를 수행합니다. prompt("질문","답변") 질문과 답변으로 질의응답 창을 나타냅니다. confirm("질문내용") 질문 내용으로 확인이나 취소 창을 나타냅니다. [확인]버튼을 누르면 true를 반환하고, [취소] 버튼을 누르면 false를 반환합니다. moveTo(x,y) 지정한 새 창의 위치를 이동합니다. resizeTo(width,height) 지정한 새 창의 크기를 변경합니다. setInterval(function().. 2019. 12. 30.
[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.
반응형

티스토리툴바