UX·UI - FrontEnd Dev. Story

속성 4

<a>태그 href 속성 #, #none 및 taget, title 속성 파해치기

1. 태그 속성 종류 ● href : 연결하고 싶은 주소를 지정한다. ● target : 링크 클릭 시, 창의 형태를 지정한다 [ _blank, _self, _top, _bottom ] ● title : 링크에 대한 설명을 넣는다. 2. 태그의 href 속성 href = Hypertext Reference의 약자 - href="연결 주소" 주소 링크를 넣어서 속성의 값으로 경로를 이동시킨다. 코딩을 하다보면 href 안에 #, #none, / 넣는경우가 있는데 차이점을 알아보자. ◎ # : 아무것도 실행하지 않지만 페이지 최상단으로 이동 ◎ #ID : 지정된 id 값으로 포커스 이동 ◎ #none : 아무것도 실행하지 않고 페이지 최상단으로도 이동하지 않는다. ◎ javascript:; : 자바스크립트라..

[CSS] CSS3 셀럭터 selector 마스터하기

CSS selector 개념 잡기 CSS(Cascading Style Sheets)는 HTML 요소의 스타일(design / layout)을 정의해요. 이때 필요하게 되는 것이 Selector 입니다.. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 1. 기본 셀럭터 선택 CSS Hello World! This paragraph is styled with CSS. - - result - - Hello World! This paragragh is styled with CSS. 2. 태그 셀렉터 Heading paragraph 1 paragraph 2 paragraph 3 - - result - - Heading paragraph 1 paragra..

프론트엔드/CSS 2020.04.12

[Javascript] 자바스크립트 기초 배열 문법 활용하기

배열 배열은 여러개의 데이터를 순차적으로 저장하는 저장소이며, 사용하는 방법이 다양합니다. 1.문법 var 변수명 = [값1, 값2, 값3......] 배열 사용하는 방법 01 배열을 선언하고 데이터를 순차적으로 선언하는 방법입니다. var arr1 = new Array(); arr1[0] = 100; //첫번째 배열 저장소에 100을 저장 arr1[1] = 200; //두번째 배열 저장소에 200을 저장 배열 사용하는 방법 02 배열을 선언과 동시에 데이터를 넣는 방법입니다. var arr2 = new Array(100,200); 배열 사용하는 방법 02 배열을 선언하지 않고 바로 데이터를 넣는 방법입니다. var arr3 = [100,200]; 2. 배열 객체의 메서드 / 속성 종류 설명 join()..

[CSS] flex 관련 속성 정리 flex-direction / flex-wrap / flex-flow

1. flex-direction - 요소들 나열 방향 지정 A B C D E F main { width: 200px; height: 200px; border: 1px solid lightgray; display: flex; flex-direction:row; } main div { width: 50px; height: 50px; } flex-direction 속성의 부모 요소에 display:flex; 설정 되어 있어야 합니다. 그리고 flex-direction 속성 기능을 기재하지 않으면 기본값은 row 이므로 즉, 가로로 정렬 됩니다. row : 가로로 정렬 row-reverse : 가로로 오른쪽에서부터 정렬 column : 세로로 정렬 column-reverse : 세로로 밑에서부터 정렬 initi..

프론트엔드/CSS 2019.12.23
반응형