본문 바로가기

분류 전체보기155

[Vue] 데이터 바인딩(Data Binding) 1 데이터 바인딩 속성 앞에 v-bind: or :(콜론)을 붙여주면 데이터바인딩이 가능하다. 결과값 : value 값에 inputdata 객체 데이터를 연결시킬 수 있다. 이때 value 속성 값 앞에 v-bind를 적어주면 연결이 가능하다.(or 콜론(:)) 데이터바인딩을할 때 함수를 이용하면 더욱 편리하다. 유튜브 플레이리스트로 이동 유튜브 감성플레이리스트로 이동 link 객체에 유튜브 주소를 설정한 뒤 getYoutubeChannel이라는 함수에 유튜브 주소 뒤에 매개변수를 설정해준다. 그래서 app에서 a링크의 href="" 주소 안에 getYoutubeChannel(유튜브 채널 뒷부분 주소') 인자를 주게되면 해당 유튜브 채널의 링크가 완성된다. 결과값 : 2021. 9. 12.
[Vue] 데이터(data), 메소즈(methods) 1 data(데이터) {{person.name}} {{person.age}} 결과값 양세찬:22 2 mothods(메소드) {{nextYear()}} methods 안에 함수를 삽입할 수 있으며 {{ }} 더블 중괄호 안에 함수를 실행시켜줄 수 있다. 결과값 : 양세찬은 내년에 22살 입니다. {{nextYear('안녕')}} 결과값 : 안녕! 양세찬은 내년에 22살 입니다 2021. 9. 12.
[Vue] 인스턴스 생성 1 인스턴스 생성 {{name}} 결과값 : 2021. 9. 12.
[HTML] <article>과 <section>, <div>는 어떤식으로 써야할까? 시맨틱 태그를 잘 활용하고 싶은데 section과 article이 너무 헷갈려서 정리를 해본다. 왜 시맨틱 태그로 레이아웃을 만들어야 할까? 시맨틱 태그로 작성된 소스를 보면 태그만 보고도 어느 부분이 제목인지 메뉴인지 본문인지 알 수 있다. 그래서 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있어 편리하다. 또한 "어떤 장애가 있더라도 웹 사이트를 사용하는 데 불편함이 있어서는 안된다"라는 웹접근성 시각에서 볼 때도 중요하다. 시각장애인들은 웹 사이트를 이용할 때 화면 낭독기 같은 보조 기구를 사용하는데 시맨틱 태그를 통해 어느 부분이 제목이고 내용인지 구별할 수 있기 때문에 사이트 내용을 정확히 전달할 수 있다. 또한 태그에 대한 역할이 정확히 정해져 있기 때문에 어떤 장치에서든 문서를 똑같이 .. 2021. 9. 12.
[HTML] dl, dt, dd 태그 1 태그 정의 Description List 용어의 정의와 내용 설명이 필요할 때 사용하는 태그 태그는 태그 단독으로 사용될 수 없다. 의 한 쌍으로 이루어진다. 정의 정의에 대한 설명 Description Term 태그의 제목 인라인 요소 -> , , 등과 같은 블록 요소가 내부로 삽입될 수 없다. 처럼 하나 이상 연속으로 사용 가능하다. Description Description 태그의 용어를 설명 기본적으로 들여쓰기(margin-left)가 설정되어있다. 블록 요소 -> 다른 태그들을 자유롭게 삽입할 수 있다. 하나 이상의 를 형제 요소로 가질 수 있다 2 태그 활용 와 태그를 가로 정렬시킬 수 있다. html : 정의: 정의에 대한 설명 정의: 정의에 대한 설명 css : 결과값 : ※ float.. 2021. 9. 12.
[Vue] Vue.js란? - 컴포넌트 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프레임워크 컴포넌트 - 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI 요소 - 재사용 가능하도록 구조화 한 것. SPA(Single Page Application) - 단일 페이지 어플리케이션 - 하나의 페이지 안에서 필요한 영역 부분만 로딩되는 형태 - 빠른 페이지 변환 - 적은 트래픽 양 2021. 9. 6.
반응형

티스토리툴바