skylove1982

일반적으로 유튜브에서 유튜브 영상을 퍼가기 하면 자동으로 가로와 높이가 조절이 않됩니다. 가로를 100%으로 CSS 를 적용해도 세로 사이즈 조절이 않되는 문제가 있습니다. 그래서 세로 사이즈를 jQuery 나 오리지널 자바스크립트 등을 사용해서 높이를 계산해서 하는 경우가 있는데요. 이러한 경우에도 문제가 있습니다. 스크립트가 실행될때 가로나 높이 계산이 잘 않되는 경우가 있기 때문입니다. 물론 드물게 일어나는 현상이지만 완벽하다고 보기는 어렵습니다. 그러나 아래의 코드로 하면 반응형으로 유뷰트 영상이 비율이 잘 유지되어 나타납니다. 저처럼 유튜브 영상 높이 조절문제 해결방법을 찾으시던 분들에게 도움이 되셨으면 좋겠습니다. CSS코드 HTML 코드 iframe 의 src 에 유튜브 링크 주소를 넣어주세..

css 코드 중에 이미지 위에 마우스를 오버 했을 경우에 주위에 영향은 주지 않고 이미지만 확대되어 보이는 효과에 대한 html과 css 코드 예제입니다. css 코드 중에 scale(1.08); 관련 코드를 유의해서 보시면 됩니다. [예제 파일 : albumList.html] 앨범1의 제목비디오 갯수1앨범2의 제목비디오 갯수2앨범3의 제목비디오 갯수3 [예제 파일 : albumList.css] div.album {position: relative;display: inline-block;box-sizing: border-box;text-align: center;width: 214px;} div.album a {position: relative;margin: 0 auto;box-sizing: border-..

텍스트 정렬 옵션중에 텍스트를 일정한 가로 사이즈 영역안에서 적절히 배치되게 하고자 할때 사용하는 CSS 코드를 소개합니다. 보통은 text-align: 형식으로 선언을 하는데요. 예를 들어 text-align:left; 으로 선언했다고 하면 모든 텍스트 들은 왼쪽 정렬이 됩니다. 그리고 text-algin:center; 으로 선언했다면 가운데 정렬로 텍스트가 배치됩니다. 그러나 기본 왼쪽 정렬이면서 적절히 글자 배치가 되도록 하고자 한다면 justify 를 해주면 됩니다. 즉, text-align:justify; 으로 선언하면 보기 좋게 텍스트가 정렬됩니다~^^ 추가적으로 말씀드리면 text-align:right; 으로 선언하면 오른쪽 정렬입니다. 번외로 text-align:inherit 으로 선언한다..

위 명령어는 익스플러에서만 동작하므로 각 조건안에 이렇게 하면 안된다. 왜냐하면 파이어폭스나 크롬등에서 문제가 될수있기 때문이다. 그러나 아래와 같이 사용하여 해결할 수도 있다. IE7일 경우 ie7only.css를 사용 IE이 아닐 경우 non-IE.css를 사용 하지만 link rel 보다는 각 버전별로 스타일을 추가하거나 변경하는 식으로 해도될것 같다. 이런식으로... if IE 명령어 사용법 버전별로 따로 설정을 할 수도 있습니다. 더 자세한 내용은 http://hooney.net/2007/08/27/451/