티스토리

HighLight in your life~

검색하기

블로그 홈

HighLight in your life~

highlighter.tistory.com/m

안녕하세요~! 하이라이터입니다.

구독자: 3

방명록 방문하기

주요 글 목록

CSS, grid 관련 속성들 *grid 관련 속성들 grid-template-columns grid-template-rows gap(grid-gap) 트랙 관련 함수 - repeate() : 반복되는 값을 자동으로 처리할 수 있는 함수 - minmax() : 최소값, 최대값을 각각 지정할 수 있는 함수 - auto-fill & auto-fit : 반응형을 고려해 사용할 수 있는 키워드들(함수X) grid-column & row grid-template-areas grid-area align-items align-self justify-items justify-self align-content justify-content 공감수 0 댓글수 0 2024. 5. 7.
CSS FLEX CSS 레이아웃 - flex & grid #1 강의 소개 https://youtu.be/DxwBN7vdr-A?list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript https://youtu.be/7neASrWEFEMCSS Flexbox와 CSS Grid, 한번에 정리! https://youtu.be/eprXmC_j9A4CSS 수업 - flex 1 : intro https://youtu.be/BS9T0ZMqT58플렉스(Flex) 유형별 UI 응용 예제 : [웹사이트 레이아웃 예제] 플렉스(Flex) 레이아웃 설계(1) https://youtu.be/LkKMlbb0.. 공감수 0 댓글수 0 2024. 4. 29.
다양한 CSS 선택자 *** CSS 선택자 태그 선택자 / h1 / 태그로 요소 선택 전체 선택자 / *, / 모든 요소 선택 / div * / 특정 요소의 자식요소 모두 선택 클래스 선택자 / .slide / 클래스명으로 요소 선택 아이디 선택자 / #memid / 아이디명으로 요소 선택 후손 선택자 / .slide h2, .slide .btn / 후손(자식) 요소 선택 자식 선택자 / .slide > div / 앞 선택자의 바로 밑 자식요소 선택 인접형제 선택자 / .banner + div / 앞 선택자의 형제 요소 바로 다음 요소 선택 / .banner ~ div / 앞 선택자의 형제 요소 형제요소 중 두 번째 요소 모두를 선택 그룹화 / h1, h2.. 공감수 0 댓글수 1 2024. 4. 28.
input 태크 readonly, required 1. readonly, required - 읽기 전용, 필수 값 지정readonly : input type=text에서 텍스트를 표시하고 수정하지 못하고 read하게만 설정required : form에서 submit 버튼을 눌렀을 때, 반드시 입력하게 설정 / 반드시 값이 있어야 서버 프로그램에 전송됨 공감수 0 댓글수 0 2024. 4. 24.
CSS 속성 선택자 CSS 속성 선택자 [속성] / 해당 속성이 있는 요소 / [required] [속성 = 값] / 지정한 속성값이 있는 요소, 100% 단어가 동일해야함 / [target = _blank] [속성 ~= 값] / 지정한 속성값이 포함된 요소(단어별) / [class ~= button] [속성 |= 값] / 지정한 속성값이 포함된 요소(하이픈 포함, 단어별) / [title |= us] [속성 ^= 값] / 지정한 속성값으로 시작하는 요소 / [title ^= eng] [속성 $= 값] / 지정한 속성값으로 끝나는 요소 / [href $= xls] [속성 *= 값] / 지정한 속성값의 일부가 일치하는 요소 / [href *= w3] 공감수 0 댓글수 0 2024. 4. 24.
CSS, 테두리 스타일을 지정하는 border-style 속성 테두리 스타일을 지정하는 border-style 속성 none : 테두리가 없다. Default 값 hidden : 테두리 감추기 solid : 실선 dotted : 점섬 dashed : 짧은 직선 double : 이중선 공감수 0 댓글수 0 2024. 4. 21.
CSS, 글자, 텍스트 스타일 속성 CSS, 글자, 텍스트 스타일 속성 1. 글자와 관련된 속성 font-family : 글꼴 종류 font-size : 글자 크기 font-style : 글자 스타일 지정 font-weight : 글자 굵기 2. 텍스트 스타일 속성 color : 색상 text-decoration : 밑줄, 위에선, 취소선 등 text-transform : 텍스트 전체 혹은 첫 글자를 대문자로 표시 text-shadow : 텍스트에 그림자 추가 letter-spacing : 글자 사이에 간격 지정 word-spacing : 단어 사이에 간격 지정 text-align : 텍스트 정렬 방법 지정 line-height : 줄 간격 조절 공감수 0 댓글수 0 2024. 4. 20.
자바스크립트 이벤트 자바스크립트 이벤트 - 이벤트 : 사용자의 입력 작업이나 시스템 상황의 변화 등의 사건 - 이벤트 핸들러 : 이벤트가 발생했을 때 그에 따른 행위를 결정하는 것 - 예시 onLoad : 문서를 읽을 때 onFocus : 포커스를 얻을 때 onBlur : 포커스를 잃었을 때 onMouseOver : 마우스가 대상의 링크나 영역 안에 위치할 때 발생되는 이벤트 처리 onMouseOut : 마우스가 대상의 링크가 영역 안을 벗어날 때 발생되는 이벤트 처리 onMouseDown : 마우스 버튼을 눌렀을 때 발생 공감수 0 댓글수 0 2024. 4. 18.
자바스크립트, Window 객체 - 웹 브라우저 창을 위한 속성과 메소드 제공 자바스크립트, Window 객체 - 웹 브라우저 창을 위한 속성과 메소드 제공 alert() : 경고 창을 보여줌 confirm() : 확인 대화상자 보여줌 open() / close() : 새 창 열기/창 닫기 setInterval() : 일정 시간마다 지정된 명령을 주기적으로 실행 공감수 0 댓글수 0 2024. 4. 18.
자바스크립트, Array 객체의 메서드 *** Array 객체의 메서드 concat : 기존 배열에 요소를 추가해 새로운 배열을 생성 every : 배열의 모든 요소가 주어진 함수에 대해 참이면 true 리턴하고, 그렇지 않으면 false 리턴 filter : 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 생성 forEach : 배열의 모든 요소에 대해 주어진 함수 실행 indexOf : 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스 찾음 join : 배열 요소를 문자열로 합침. 이때 구분자를 지정 가능함 push : 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환함 unshift : 배열의 시작 부분에 새로운 요소를 추가 pop : 배열의 마지막 요소를 꺼내 그 값을 결과 반환.. 공감수 0 댓글수 0 2024. 4. 18.
스타일 시트, 스타일 우선 순위 1. 스타일 시트 브라우저 스타일 기본 스타일 인라인 스타일 : 스타일 속성을 사용하는 필수 요소에 스타일을 사용하는 내부 스타일 시트 : 문서 앞 부분에 문서에서 직접 사용하는 스타일을 모자이크서와 함께 정의하고 관리하는 외부 시트 :에서 문서 사용 스타일을 모자이크 때문에 저장한 후 연결해서 사용 2. 스타일 우선 순위 2-1. 중요도 사용자 스타일 -> 개발자 스타일 -> 브라우저 기본 스타일 2-2. 적용 범위 !important -> 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 타입 스타일 (스타일시트 선택자의 우선순위: (1) !important -> (2) Inline -> (3) #id 지정한 선택자 -> (4) .class 지정한 class선택 -> (5) 태그 이름을 지정한.. 공감수 0 댓글수 0 2024. 4. 18.
자바스크립트, 즉시 실행 함수 ** 즉시 실행 함수 *** 매개 변수가 있는 즉시 실행 함수 공감수 0 댓글수 0 2024. 4. 18.
a태그 target속성 *** a태그 target속성 클릭 _blank : 새창 또는 새탭에서 OPEN _self : 기본 값으로 현재 창에서 OPEN _top : 모든 프레임 제거하고 최상위창에서 OPEN _parent : 부모창에서 창 OPEN frame name : 연결 이름의 프레임에서 OPEN 공감수 0 댓글수 0 2024. 4. 18.
spring framework api Spring API https://docs.spring.io/spring/docs/4.3.8.RELEASE/javadoc-api/ mybatis http://www.mybatis.org/mybatis-3/apidocs/reference/org/apache/ibatis/session/SqlSession.html mybatis-Spring http://www.mybatis.org/spring/apidocs/ mybatis Mapper XML Files http://www.mybatis.org/mybatis-3/sqlmap-xml.html JavaScript http://www.w3schools.com/js/default.asp http://devdocs.io/ CSS https://www.kobzarev.c.. 공감수 0 댓글수 0 2023. 5. 19.
CSS 가상 요소 "::before"와 "::after" https://hianna.tistory.com/726 https://blogpack.tistory.com/1025 https://developer.mozilla.org/ko/docs/Web/CSS/::before http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/ 공감수 0 댓글수 0 2023. 2. 10.
exceeding the 65535 bytes limit 1. Increasing the size limit of compiled JSP files to more than 65KB. a JSP page compiles to a Java class, and there's a hard limit of 64k on the size of a Java class. If the JSP compiles down to a class larger than that limit, then you'll get an error. 2. https://bono915.tistory.com/entry/Tomcat-JSP-%EC%9A%A9%EB%9F%89-%EC%B4%88%EA%B3%BC-exceeding-the-65535-bytes-limit [Tomcat] JSP 용량 초과 - is ex.. 공감수 0 댓글수 0 2022. 7. 4.
CSS 기본 내용 CSS 테두리 이미지 삽입 https://www.w3shcools.com/css/css3_border_images.asp https://www.w3shcools.com/css/css3_border_images.asp www.w3shcools.com CSS의 고급활용 예제 - 전환, 애니메이션, 그레디언트 효과, 텍스트와 상자 그림자 효과 기능 - 페이징과 툴팁 - 2D 변형(rotate, scale, translate) 공감수 0 댓글수 0 2022. 5. 19.
HTML FORM 테그 **************** FORM 태그 **************** Form태그란? - 사용자로부터 어떠한 정보를 받고 싶을 때 사용 - 숙박부, 주문양식, 설문조사, 피드백 등을 위해 활용될 수 있음 Form tag의 양식 : form의 시작을 알리는 tag : 다양한 방법 중 하나로 정보를 질의 : form의 끝을 알리는 tag Form 기본태그 예제 form 태그 연습 당신의 이름은 무엇입니까? 공감수 0 댓글수 0 2022. 5. 19.
HTML TABLE, IFRAME 공감수 0 댓글수 0 2022. 5. 19.
HTML 기본 테그 HTML 기본 테그 1.폰트 스타일 지정 2.텍스트 형식 3. 배경 변경 4. 리스트(list) 5. 기타 공감수 0 댓글수 0 2022. 5. 19.
CSS 가상클래스 1. CSS 가상클래스 공감수 0 댓글수 0 2022. 4. 15.
뷰포트(viewport), 미디어 쿼리 1. 반응형 웹 디자인 - 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법 - 다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적 => 화면 크기에 '반응'해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인 2. 모바일 기기를 위한 뷰포트(viewport) - 뷰포트 : 실제 내용이 표시되는 영역 - PC화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서의 의도한대로 표시되지 않음 => 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용 표시 SCREEN DIMENSIONS Popular Devices Viewport Size https://y.. 공감수 0 댓글수 0 2022. 4. 2.
CSS 고급선택자 - 화면 구성시 가장 참조가 될 듯 하다, 테스트파일 포함 이번 장은 가장 중요한 듯 하다. 화면 구성에 많은 도움을 받을 수 있을 듯 하다. 특히, 첨부파일에 매우 중요하다. 개인적으로 공부를 하다 보니 이번 장이 가장 도움을 받는 듯 하면서, 유용한 듯 하다. 종류 선택 요소 예시 [속성] 해당 속성이 있는 요소 [required] [속성 = 값] 지정한 속성값이 있는 요소 [target = _blank] [속성 ~= 값] 지정한 속성값이 포함된 요소(단어별) [class ~= buttons] [속성 != 값] 지정한 속성값이 포함된 요소(하이픈 포함, 단어별) [title |= us] [속성 ^= 값] 지정한 속성값으로 시작하는 요소 [href ^= eng] [속성 $= 값] 지정한 속성값으로 끝나는 요소 [href $= xls] [속성 *= 값] 지정한 .. 공감수 0 댓글수 0 2022. 4. 2.
이미지와 그라데이션 효과로 배경 꾸미기 '이미지와 그라데이션 효과로 배경 꾸미기' 예제 파일이 아래와 같습니다. 아래 사진은 bg.png 파일입니다. *그라데이션 원의 크기 지정 속성값 설명 closest-side 원형이라면 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 측면에 닿을 때까지 그립니다. 타원형이라면 그라데이션 중심에서 가장 가까운 요소의 가로 측면이나 세로 측면에 닿을 때까지 그립니다. 결과 화면은 그라데이션을 적용하는 요소가 변이 4개인 사각형입니다. 여기에서는 오른쪽 측면에서 그라데이션의 가장 자리가 닿을 때까지 그라데이션을 그립니다. closest-corner 그라데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그립니다. 결과 화면은 그라데이션이 적용되는 사각형 요소에 꼭짓점(corner)이 4개.. 공감수 0 댓글수 0 2022. 4. 2.
Javascript에 많이 사용하는, 레이아웃을 구성하는 CSS 박스 모델 '레이아웃을 구성하는 CSS 박스 모델' 에 대한 예제 파일들 입니다. 공감수 0 댓글수 0 2022. 3. 26.
텍스트 스타일 속성 1. '텍스트 스타일 속성' 설명 종류 설명 color 글자색을 지정 text-decortation 텍스트에 밑줄이나 취소선을 표시할지 여부 지정 text-transform 텍스트 전체, 또는 첫 글자를 대문자로 표시 text-shadow 텍스트에 그림자를 추가 letter-spacing 글자 사이의 간격을 지정 word-spacing 단어 사이의 간격을 지정 text-align 텍스트 정렬 방법을 지정 line-height 줄 간격을 조절 2. 예제 HTML 파일 공감수 0 댓글수 0 2022. 3. 26.
글자 폰트, 글자 스타일, Google Fonts 1. 구글 한글 폰트 https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Google Fonts를 사용하기 위해서는 아래와 같이 진행을 하면 된다. 1-1. Download family 1-2. 압축 해제 및 설치 1-3. html 혹은 jsp 등의 파일에 부분에 혹은 @import를 사용하여 사용 가능하게 설정 1-4. html 혹은 jsp 등의 파일에서 사용 2. 적용 예제 html 파일 3. 글자와 관련된 속성 종류 설명 font-family 글꼴 종류를 지정한다. font-size 글자 크기를 지정한.. 공감수 1 댓글수 0 2022. 3. 26.
이벤트, 이벤트 처리기 *이벤트란? 1. 웹 브라우저나 사용자가 행하는 동작 2. 웹 문서 영역안에서 이뤄지는 동작만 가리킴 3.주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생 *마우스 이벤트 종류 설명 click 사용자가 HTML 요소를 클릭할 때 이벤트가 발생 dbclick 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생함 mousedown 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생함 mousemove 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생함 mouseover 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생함 mouseout 마우스 포인터가 요소를 벗어날 때 이벤트가 발생함 mouseup 사용자가 요소 위에 놓인 마우스 버튼에서 손을 .. 공감수 0 댓글수 0 2022. 3. 25.
프론트엔드 강의 - 프론트엔드 개발자 되기 입문편 프론트엔드 공부 순서, 높은 연봉 받는 프론트엔드 개발자 되기 | 해외 개발자 선배가 알려드려요 ⭐️ (웹개발 공부 순서) https://youtu.be/NeEaTeYcFhE?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y 클론코딩 포트폴리오 반응형 웹사이트 따라 만들기 | HTML, CSS, JavaScript 프론트엔드 강의(드림코딩 아카데미 오픈) https://youtu.be/v2Aw9f-MK5s?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y 프론트엔드 강의, 프론트엔드 개발자가 되고 싶다면? 웹개발 입문자편 강의를 시작합다 ⭐️ (HTML, CSS, Javascript + 실전 프로젝트) https://youtu.be/HBGN-jZDUrE?list.. 공감수 1 댓글수 0 2022. 2. 25.
리액트 무료 강좌 React 기초 0강 : 리액트왜 쓰는지 알려줌 (+ 수강시 필요 사전지식) https://youtu.be/LclObYwGj90?list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy React 기초 1강 : 리액트 설치와 셋팅법 (2021+ 스타일) https://youtu.be/nahwuaXmgt8?list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법) https://youtu.be/FqnAFX9lQPQ?list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy React 기초 3강 : 리액트에선 변수말고 state 만들어 쓰랬죠 (useState) https://youtu.b.. 공감수 0 댓글수 0 2022. 2. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.