[1일 1코딩]  코딩독학 HTML 링크  feat. tcpschool





오늘은 HTML 링크!




실습해본거 옮겨적기...





tcpschool 사이트에서 보면서


창 두개 띄워 놓고 


바로 바로 베끼면서 코딩실습하는중





링크 : <a> 태그


<a href = "링크주소"> HTML 링크 </a>




target 속성 : 


링크로 연결된 문서를 어디에서 열지 명시함.


_blank : 링크로 연결된 문서를 새 창이나 새 탭에서 염.


_self : 현재 프레임에서 염 (기본)


_parent : 부모 프레임에서


_top : 현재 창의 가장 상위 프레임에서


프레임 이름 : 지정된 프레임에서





링크의 상태 : 


link : 방문한 적이 없는 상태 (기본)


visited : 한 번이라도 방문한 적이 있는 상태


hover : 링크 위에 마우스를 올려놓은 상태


active : 링크를 마우스로 누르고 있는 상태




페이지 책갈피 : 


<a> 태그의 name속성 이용


가고 싶은 위치에 <a>태그를 만들고 name 속성을 작성


그 다음 작성한 name 값을 이용하여 <a>태그에서 링크를 걸기


<a href = "#bookmark"> <p>다음으로 이동</p></a>


<a name = "bookmark"</a> <p>여기로</p>






앞에서 했던 내용이랑 오늘 공부한 거랑

응용해서 한 실습 공유합니다 ㅋㅋㅋ


재미있꾼




<head>

<meta charset="UTF-8">

<title>HTML Links</title>


<style>

a:link    { color: blue; }

a:visited { color: red; text-decoration: none }

a:hover   { color: yellow; text-decoration: none }

a:active  { color: gray; text-decoration: none }

</style>


</head>


<body>




<h1 style="color:silver">페이지 책갈피</h1>

<a href="#book"><p>북마크를 해보자</p></a>

        <a href="#book2"><p>한번 더 해보자</p></a>

   <a href="http://www.tistory.com" target="_blank"><h1>티스토리로 이동</h1></a>

  

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  

  


<h1 style="color:pink"><a name="book"></a>여기로</h1>


  

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  

  <h1 style="color:red"><a name="book2"></a>여기로</h1>

  

  

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  

  

</body>

  



>>결과 한번 확인해보세욤  >> 클릭


제가 쓴 코드 복붙해보시면 됩니당





출처 : TCP스쿨









'[1일1코딩]' 카테고리의 다른 글

코딩독학 HTML 리스트 feat. tcpschool  (6) 2018.05.02
코딩독학 HTML 이미지 feat. tcpschool  (2) 2018.05.01
코딩독학 HTML 색 feat. tcpschool  (2) 2018.04.27
코딩독학 HTML 스타일 feat. tcpschool  (4) 2018.04.26
코딩독학 HTML 주석과 엔티티 feat. tcpschool  (4) 2018.04.23

멘탈리스트 시즌4 에피소드3 오프닝씬




나의 최애 미드... 멘탈리스트...


멘탈리스트의 꿀잼 포인트는 오프닝씬인 것 같다.


오프닝 씬 딕테이션 해놨던 거를 하루에 한 두 문장씩 파헤쳐 보려고 만든 카테고리...!


멘탈리스트에 나온 대화로 사전 찾아보면서 공부하는것을 그냥 기록하는 글입니다...


(단어, 표현 정리)



*** 오역 지적, 의견 댓글 환영합니다 :> 




Jane : Lisbon. I understand your precarious emotional state 

given you've just gotten your job back and

 your sensitivity to the bureaucrats that are watching your every move.


Lisbon : They are.


Jane : Yes. but that's your thing. I gotta be me. I can't change who I am.


Lisbon : No, but you can change where you are tomorrow at 12.


Jane : That's not gonna happen.








내가 제일 좋아하는 Jane의 대사 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

I gotta be me. I can't change who I am.

Jane의 캐릭터를 딱 보여주는 대사

누가 뭐래도 난 나만의 길을 간다...!






오늘의 문장과 표현 : precarious / bureaucrat / given




첫번째 단어 : precarious



Collins Dictionary에 따르면


[Adjective]

- If your situation is precarious, you are not in complete control of events and might fail in what you are doing at any moment.

- Something that is precarious is not securely held in place and seems likely to fall or collapse at any moment.

(ex) precarious ladders.


>> 위태로운, 불안한



두 번째 단어 : bureaucrat



Collins Dictionary에 따르면


[Noun]

Bureaucrats are officials who work in a large administrative system. You can refer to officials as bureaucrats especially if you disapprove of them because they seem to follow rules and procedures too strictly.


>> 규칙이나 절차를 심하게 따지는 고위관료들을 지칭할 때..부정적인 뉘앙스가 있는 표현인 것 같다.



세 번째 단어 : given that ~



Jane의 대사에서는 that 이 생략됨.


Collins Dictionary에 따르면


[phrase]

If you say given that something is the case, you mean taking that fact into account.


>> ~를 고려하면



Jane : Lisbon.I understand your precarious emotional state 

given you've just gotten your job back 

and  your sensitivity to the bureaucrats that are watching your every move.


"리스본. 너가 막 복직해서 감정적으로 불안한 상태인 것도 알겠고,

 너의 모든 행동을 지켜보는 고위관료들한테 예민한것도 알겠는데..."


Lisbon : They are.


"진짜 지켜보거든."


Jane : Yes. but that's your thing. (보너스 표현)


"그래. 근데 그건 니 사정이고 ^0^"


ㅋㅋㅋㅋㅋㅋ



'[1일1영어]' 카테고리의 다른 글

미드로 영어공부 peel out / behind the wheel / custody / ransom demand  (4) 2018.05.04
미드로 영어공부 snatch / specifically / liaise with / have someone back  (2) 2018.05.01
미드로 영어공부 copy down / forge / against the rules  (2) 2018.04.27
미드로 영어공부 You're coming too / check attendance / sign in  (0) 2018.04.24
미드로 영어공부 memo / mandatory / protocol  (2) 2018.04.23

[1일 1코딩]  코딩독학 HTML 색  feat. tcpschool





오늘은 HTML 색!



내가 제일 좋아하는 스타일 꾸미기



난 이런게 제일 재미있다...


왜냐면..


쉬우니까... ^^



실습해본거 옮겨적기...





tcpschool 사이트에서 보면서


창 두개 띄워 놓고 


바로 바로 베끼면서 코딩실습하는중










HTML 색상 표현에는 세 가지 방법이 있다.






1. 색상 이름



색상이름으로 표현할 수 있는 것은 16개밖에 없는가보다.






<태그이름 style = "속성이름 : 속성값">


배경색 변경


>> 속성 : background-color



글자색 변경


>> 속성 : color



글자 크기 변경


>> 속성 : font-size



문단 정렬 변경


>> 속성 : text-align




<h1 style="color : olive"> 색상 이름으로 표현된 올리브색 </h1>





>> 결과








2. RGB 색상값



Red / Green / Blue 혼합


0부터 255까지의 범위


(Red, Green, Blue) 형태



숫자 조합해서 색상 만드는 재미가 있다 ㅋㅋ






<h1 style = " color : rgb(0,0,255)"> blue </h1>


<h1 style = " color : rgb(0,0,0)"> black </h1>


<h1 style = " color : rgb(255,100,100)"> peach </h1>


<h1 style = " color : rgb(150,125,200)"> light purple </h1>






>> 결과









3. 16진수 색상값





RGB 색상값을 16진수로 변환.


각각의 기본색은 00 ~ FF 까지 값을 가짐


빨간색 rgb(255,0,0) 은


#FF0000



네이버치면 색상표 나오긴하는데


16진수 다시 공부해바야겠다








<h1 style =" color : #0000FF"> blue </h1>

<h1 style =" color : #00C000"> green </h1>

<h1 style =" color : #FFB2D9"> pink </h1>

<h1 style =" color : #FBFF90 ; background-color : black"> lemon </h1>

<h1 style =" color : #FF8000"> orange </h1>






>> 결과












출처 : TCP스쿨









'[1일1코딩]' 카테고리의 다른 글

코딩독학 HTML 이미지 feat. tcpschool  (2) 2018.05.01
코딩독학 HTML 링크 feat. tcpschool  (2) 2018.04.30
코딩독학 HTML 스타일 feat. tcpschool  (4) 2018.04.26
코딩독학 HTML 주석과 엔티티 feat. tcpschool  (4) 2018.04.23
코딩독학 시작은 힘차게 HTML 기초 태그 feat. tcpschool  (2) 2018.04.20

+ Recent posts

티스토리툴바